[js]日付ピッカーのflatpickr導入方法

難しくない。

メリット
やっていく
使用にあたり

メリット

鉄板どころに、例えばjQuery-uiがある。
でもこれはピッカー以外にも色々できるから、日付だけを目的にすると無駄な読み込みがある。

日付だけ欲しいなら日付だけのやつを使うのが良いですね。

ということで、目についた「flatpickr」。

flatpickr

A lightweight and powerful datetimepicker

やっていく

日付用のinputは例えばこう。

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

idとかで指定できるようにしておく。

本体はこう。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
<script>
    flatpickr('#flatpickr',{
        locale: "ja",
    });
</script>

他の非jQueryと同様に</body>の手前に記入する。

本体に拡張子とか書かれてないけどこれで間違ってない。

日本語化は日本語用のファイルを読み込んで適用させる必要があるので注意。

複数選択とかフォーマットとか時間選択とかも対応してるので、公式とかを読んで自分に都合のいい感じにしてください。

テーマも読ませれば変えられるらしいけど、いっぱい設置して見分けつくようにしなきゃ的な話でもなきゃプレーンなので良いんじゃないかな。

使用にあたり

導入先のinputはjs側でreadonlyにしてくれてるので、そういうフォローの意味でこっちでやる作業はない。ちゃんとしてる。感心したポイント。