【JavaScript】カレンダーライブラリ flatpickr

jQueryを使用したページを作っている場合は沢山選択肢はあるが、jQueryを導入していないページにカレンダー機能だけのために導入するというのもナンセンスなので、必要としないライブラリを調査した。

その中で、flatpickrが軽くてデザインもシンプルで良い感じだったので使ってみた。モバイルにも対応している。使い方は、flatpickrドキュメント翻訳 で公式サイトを翻訳しておられるのでわかりやすい。



 

使い方は簡単。下記のようにヘッダでライブラリを読み込んで、JavaScriptでflatpickrを定義し、適用するタグで呼び出すだけ。

<br />
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css&quot;&gt;<br />
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.js&quot;&gt;&lt;/script&gt;<br />
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js&quot;&gt;&lt;/script&gt;<br />

 

<br />
&lt;input class=&quot;flatpickr&quot; type=&quot;text&quot; placeholder=&quot;Select Date..&quot;&gt;<br />
&lt;script&gt;<br />
    flatpickr('.flatpickr');<br />
&lt;/script&gt;<br />

 

いくつか使えそうなオプションを試してみた。

See the Pen flatpickr examples by Take (@takapps) on CodePen.