今回はちょっとしたメモ程度。

bootstrap4を使っていて日付項目をdatetimepickerで入力したいなというときに、ライブラリを使うかと思います。 f:id:us_key:20190424210417p:plain Tempus Dominus - Bootstrap 4

ライブラリの使い方などは下記のページを参考にしました。 its-office.jp

で、実装する中で、カレンダーで日付を選択したタイミングでイベント発火させたいな、となりました。
具体的には、日付を変更したタイミングでその日付に紐づくデータを取ってくるとか、日付をURLパラメータにセットして画面遷移するとか。
単純にjqueryのchangeイベントで処理を書けばいいかと思ったらそうはいかずちょっと手間取ったので、メモしておきます。

changeイベントの実装

$('#datetimepicker').on("change.datetimepicker", function(e){
    e.preventDefault();
    if (e.oldDate) {
        var target_date = $(this).val();
        window.location.href = "/hogehoge?target_date=" + target_date;    
    }
});

changeイベントはchange.datetimepickerというイベントで発火させればいいとのことで、実装してみました。 https://tempusdominus.github.io/bootstrap-4/Events/#changedatetimepicker

change.datetimepickerの発火タイミング

で、実装したところ、対象のinputを選択した時点でイベント発火するという。しかもなぜか2回発火する。まじか。
上記ページに記載があるのですが、このイベントはdateとoldDateという2つのパラメータを持っています。
input選択時に2回実行されるうち、1回目はoldDateがnull、2回目はoldDateを持っていません(何により発火されているのだろう？？)。
ということで、e.oldDateを評価して、値が設定されていれば処理を実行するという形にしました。これで選択時の2回の発火はスルーされ、日付変更時にイベント発火されるようになりました。

ajaxで処理したい場合(未解決)

上記は日付変更時に別画面に遷移するためOKなのですが、ajaxで実行したい場合にはページ内に留まることになります。
どうも日付変更時にもこのイベントが2回発火されていて、しかもどちらもoldDateがセットされているようです。
2回発火されるのを避けるには別の方法を採る必要がありそうだなあ。。
もうちょい調べてみようかなと思います。