Flatpickrで現在時刻をセットするボタンを実装する（TypeScript対応）

現在時刻をセットするボタンを実装したい

まずは日付フォーマットで楽するためにdayjsをinstall

yarn add dayjs

https://www.npmjs.com/package/dayjs
日付フォーマット系の中でも軽量らしく、今回はフォーマットしかしないのでdayjsを選択。

実装

import flatpickr from 'flatpickr';
import { Japanese } from 'flatpickr/dist/l10n/ja';
import dayjs from 'dayjs';

const myElement = document.querySelector('.myElement');
if(myElement) {
  const fp = flatpickr(myElement, {
    enableTime: true,
    dateFormat: 'Y/m/d H:i',
    minDate: 'today',
    time_24hr: true,
    locale: Japanese,
    defaultHour: new Date().getHours(),
    defaultMinute: new Date().getMinutes()
  });

  // 現在時刻セットボタン
  const myButton = document.querySelector('.myButton');
  if(myButton) {
    myButton.addEventListener('click', () => {
      const date = dayjs().format('YYYY/MM/DD HH:mm');
      fp.setDate(date, true);
    });
  }
}

configはlocaleで日本語対応と、カレンダーを開いた際に現在の時分をdefaultHourとdefaultMinuteでセットするという記述もありますので参考までに。

ifでdocument.querySelectorの結果がnullではないことを伝えることで、TypeScriptでも怒られないようになります。

型定義は最新のFlatpickrにはすでに入っているので、@typesを使う必要はありません。