JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカレンダー(年月日)は不要で時分のみ入力させたいケースがあった。以下に対応方法をメモ。

Flatpickr

公式サイト

https://flatpickr.js.org/

GitHub

https://github.com/flatpickr/flatpickr

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/l10n/ja.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://cdnjs.com/libraries/flatpickr

対応方法

ソースコード

<input id="time" name="time" type="text" value="00:00">

<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/flatpickr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.13/l10n/ja.min.js"></script>

<script>
const time = flatpickr(`#time`, {
    locale: 'ja', 
    enableTime: true,
    noCalendar: true,
    dateFormat: `H:i`,
    defaultHour: 0,
    defaultMinute: 0,
    minuteIncrement: 30,
});
</script>

その他

Flatpickrの基本的な使い方は過去記事を参照すること。