日時入力UIの救世主「flatpickr」を使ってみた話

2026.02.05

エンジニア / O.H

JavaScript
「JavaScript<」に関する内容を含む記事です

この記事は2025/08/01に作成されました。

「どうしてコレもこのブラウザは対応してないんですか！？」
プログラマやコーダーはこのようなことは日常茶飯事だと思うのですが、先日どうにも解せない“ソレ”にぶち当たりまして。
input type="datetime-local"にはブラウザのコントロールUIがあるのに、どうしてinput type="time"には用意されていないんですか！？！？
などと思っていたら、正確にはdatetime-localのコントロールUIにはinput type="date"と同じものを使用…つまり時間専用のコントロールUI自体が、そのブラウザには実装されていなかったのです。
そんなのありかよ～～～と、しょげていたら自社の先駆者に「flatpickr」という存在を教えてもらいました。

flatpickrとは？

ブラウザに依存せずに、日付や時間の入力UIを提供できるJavaScriptライブラリです。
日付・時間だけでなく、年月指定ができる軽量なjsライブラリで、見た目のカスタマイズも複数のテーマから選択できる優れものです。
スマートフォンなどでも問題なく使用できます。

早速実装してみる

まずはデフォルト設定されているカレンダーを表示させてみます。

head内にcssとjsを読み込んで

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

bodyタグ内に

<input type="text" id="dateSelector">

scriptタグ内に

flatpickr("#dateSelector");

これを書くだけで…

いとも簡単にカレンダーフォームを実装できました。

日本語化する

head内に日本語化するjsの記述を書き加えて、

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>

scriptタグ内に書いていたものを下記のように書き換えます。

flatpickr("#dateSelector", {
 locale: 'ja',
});

そうすると…

簡単すぎる…！

時間セレクターを表示させてみる

一度新しいフォームを定義して、

<input type="text" id="timeSelector">

scriptタグ内に

flatpickr("#timeSelector", {
  locale: 'ja',
  enableTime: true, //時間セレクターの有効化
  noCalendar: true, //カレンダーセレクターを非表示
  dateFormat: 'H:i', //入力ボックス内での表示方法の定義
  minuteIncrement: 1, //分入力のステップ量
});

こんな風に記述してあげると

すごい…！！本当に簡単すぎるしどのブラウザでも使える…！！
こちらはデータとしてはテキストになるので、表示されている「12:00」というテキストデータで取得されます。

テーマを変えてみる

読み込むcssを変更すると、デフォルト以外に7種のテーマを使用することができます。

<!--デフォルト-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
 <!--dark-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/dark.css">
 <!--material_blue-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_blue.css">
 <!--material_green-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_green.css">
 <!--material_red-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_red.css">
 <!--material_orange-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/material_orange.css">
 <!--airbnb-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css">
 <!--confetti-->
 <link rel="stylesheet" type="text/css" href="https://npmcdn.com/flatpickr/dist/themes/confetti.css">

各テーマの見た目は、公式のドキュメントで確認できます。