flatpickrで日付け選択とキーボード入力の両方可能にする

JavaScriptの日付け選択ライブラリで「flatpickr」というものがあります。軽量で設定も簡単で、見た目も良く、愛用しています。

ただ、基本的にマウスでの操作を想定しているようで、日付けの直接入力がやりづらいのが難点です。allowInputオプションを設定すると直接入力出来るようになるのですが、入力後にEnterキーを押してもカレンダーが消えず、結局マウスで該当の日付けをクリックしなければなりません。この操作が煩わしく感じていたので、Enterキーを押したタイミングでカレンダーが消えるようにしてみました。

まずは直接入力可能にするオプションを指定します。

let calendar = flatpickr('#calendar', {allowInput: true});

次に、日付け入力対象のオブジェクトに対してkeydownイベントを設定します。keydownイベントの中ではEnterキー(13)、tabキー(9)が押されたか判別します。どちらかが押された場合には、入力内容をcalendarにセットし、calendarをクローズします。

let obj = document.getElementById('calendar');
obj.addEventListener('keydown', function(e) {
  if (e.keyCode == 13 || e.keyCode == 9) {
    calendar.setDate(this.value);
    calendar.close();
  }
}, false);

たったこれだけですが、Enterキーを叩くとカレンダーが消えるようになります。だいぶ入力しやすくなりました。

今回説明で利用したソースはこちらにあります。