サイトにカレンダーを表示する方法 - KDP(電子出版)のメモ　急急如律令

　日付をカレンダー表示して選択するのがあるが、どうやってできるのかを試してみた。DatetimePickerと言うものが良いらしいので使ってみた。

やり方が書いてあったのだけど、そのままやったら動かなかったので修正しました。

日本語だけじゃなくて、英語の本家で見てみないとイマイチ使い方がつかめなかった。

本体はここからダウンロードした。

設定はqiitaの記事から行った。

ただ、カレンダーの選択範囲を指定したかったのでそれについては調べてから追加した。

minDate:'2020/04/23',
maxDate:'2020/05/12',
disabledDates:['2020/05/04'],
format: 'YYYYMMDD'

たとえば、minDateでカレンダーの開始する日付、maxDateで終了する日付。disabledDatesで除外する日付を決めることができるformat: 'YYYYMMDD'でスラッシュ無しで日付を表示している。

　その他に、カレンダーの日付を変更したことを起点として何かをさせたいと思ったときは、イベントリスナーにdp.changeを指定すると良いようだ。表示している日付を利用する場合は、$(this).val()で渡すことができる。

$('#datetimepicker1').on("dp.change", function(e){

console.log($(this).val())

});

eventlistenerのchangeで日付が変わったときになにかの処理をさせることができるかと思ったがそうでもなかった。どうも専用のものが用意されているのでそれを使うようだ。