HTMLのDatePickerがモバイルでうまく動作しない

業務で日付検索を行う際に、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

kuga

IT/Webエンジニアとして勤務しています。

猫が大好きです。このところ毎日愛猫に枕を取られ続けています。