問題 × 解決策

jQuery UI Datapickerのカレンダーで過去の日付を選択できないようにする

問題

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/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

one × five =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧