• jQuery

【簡単datapicker】選択した日付によってイベントをjQueryで追加する方法

お問い合わせフォームの日付選択項目でdatapickerを使っている。

datapickerのカレンダーで、選択した日付によって任意のイベントをjQueryで実行したい。

本記事ではこのような悩みを解決します。

onSelectイベントを使おう

  jQuery('#datepicker').datepicker({
    dateFormat: 'yy年mm月dd日【D曜日】',
    minDate: 0,
    onSelect: function (dateText, inst) {
      // 任意のイベントを書く
    }
  });

選択した日付によって任意のイベントを実行したい場合はonSelectイベントを使います。

onSelectイベントは日付を選択・切り替えしたらを発火する関数です。

datapickerの実行関数内でonSelect: function (dateText, inst) {}を記述しましょう。

引数にあるdateTextに選択した日付フォーマットが入ります。

ある曜日を指定し任意のイベントを追加する

<script>
  jQuery('#datepicker').datepicker({
    dateFormat: 'yy年mm月dd日【D曜日】',
    minDate: 0,
    onSelect: function (dateText, inst) {
      if (dateText.match(/日曜日/)) {
        $('.day').text('休みです');
      }
    }
  });
</script>
<div class="day">営業してます。</div>

任意のイベントサンプルです。

例えば、日曜日の日付を選択したら【休みです】という文字列をhtmlに追加したい場合。

onSelect内で条件分岐if文を追加。

条件式にdateText（選択された日付）に日曜日という文字列があったらという式をmacth関数を使って書きます。

あとは追加したいセレクタに【休みです】という文字列をtext関数を使って入れて上げればOK。

以上で完成です。

まとめ

お店の定休日・祝日を選択したら任意のイベントを実行したいという案件があり、onSelectイベントを使いました。

忘備録として本記事に残します。

ぜひ活用してみてください。

以上で解説を終わります。