【簡単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イベントを使いました。
忘備録として本記事に残します。
ぜひ活用してみてください。
以上で解説を終わります。
目次