業務で日付検索を行う際に、HTMLのDatePickerを使用して実装を行うことにしました。
が、minやmaxの設定がPC環境ではうまく動作しているのに対し、モバイル環境では設定が反映されていませんでした。
修正するために色々と情報を探したのですが、ほとんど情報がなく困ったためブログに残します。
結論
HTMLのDatePickerの使用を諦め、jQueryUIのDatePickerで実装することにしました。
原因
HTML5標準のDatePickerは新しく策定された機能で、まだブラウザの実装が追い付いておらず、Safariなどでは使用できない。
調べたところ上記の情報を見つけました。
DatePickerはまだ新しい機能のためモバイル環境に適応されていない?という感じでしょうか。
実装
HTMLに以下を追記する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" /></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text" id="datepicker">
JavaScriptに以下を追記する。
$('#datepicker').datepicker();
上記だけでとりあえずDatePickerを作成することができます。
また、minやmaxなのど設定も簡単で以下のように追記します。
$('#datepicker').datepicker({
minDate: new Date('2023/1/10'), // 2023年1月10日から選択が可能
maxDate: new Date('2023/1/15'), // 2023年1月15日まで選択が可能
minDate: "0d", // 今日の日付から選択が可能
maxDate: "+7d", // 今日の日付から7日後まで選択が可能
});
他にも色々なオプションをつけられます。(以下参照)
https://js.studio-kingdom.com/jqueryui/widgets/datepicker
![](https://www.rail-c.com/wp-content/uploads/2020/10/CatOnMac-scaled.jpg)
IT/Webエンジニアとして勤務しています。
猫が大好きです。このところ毎日愛猫に枕を取られ続けています。
最近のコメント