問題
jQuery UI Datapickerのカレンダーで過去の日付を選択できないようにするには？
解決策
Datepickerの設定「$('日付用のテキストフィールド').datepicker({ オプション: 設定 });」で、オプションに「minDate: 0」を設定する。
カレンダーで過去の日付を選択できないようにする。
jQuery UI Datapickerのカレンダーで過去の日付を選択できないようにする方法をご紹介します。
jQuery UI Datapickerのカレンダーを表示する方法を過去の記事で紹介していますので、ぜひこちらもご覧ください。
jQuery UIのDatepickerでフォームの日付入力をカレンダー選択にする
DEMOはこちら
- ※入力フィールドの隣のアイコンをクリックすると、カレンダーが表示されます。
- ※カレンダーの日付を選択すると、入力フィールドにその日付が表示されます。
CDNを利用して、jQuery UIを読み込みます。
CDNを利用して、jQuery UIを読み込みます。
<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>入力フィールドの隣のアイコンにクリックイベントを設定する。
入力フィールドの隣のアイコンにクリックイベントを設定します。
if($('form .input-text.cal').length){
$('form .input-text.cal').prop('readonly',true);
$('form .cal-icon a').click(function(){
event.preventDefault();
$(this).closest('form').find('.input-text.cal').datepicker({
dateFormat: "yy年m月d日",
minDate: 0
});
$(this).closest('form').find('.input-text.cal').datepicker("show");
});
};ポイント!
オプションに「minDate: 0」を設定することで、過去の日付を選択できないようにすることができます。
参照
以下のサイトが、より詳しく解説してくれています。
【jQueryの日付ピッカー（datepicker）で今日の日付以降から選択可能にするため – jQueryの例】
https://ja.thewordcracker.com/jquery-examples/jquery-datepicker-to-prevent-past-date/
コメント