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

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

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



 

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

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

 

<input class="flatpickr" type="text" placeholder="Select Date..">
<script>
    flatpickr('.flatpickr');
</script>

 

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

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

Web開発, Application, プログラミングjavascript, カレンダー

Posted by たけ