バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicker」プラグインを利用することが多い。ただ今回はバニラJavaScriptにて対応したかった。調べたところ「Flatpickr」というライブラリが良さそう。以下にサンプルと利用方法をメモ。

サンプル

https://taitan916.info/sample/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

利用方法

ソースコード

<div class="date_area">
    <div class="title">通常版</div>
    <input type="text" id="date_1">
</div>

<div class="date_area">
    <div class="title">最小日(月初)と最大値(月末)を指定</div>
    <input type="text" id="date_2">
</div>

<div class="date_area">
    <div class="title">土日は選択不可</div>
    <input type="text" id="date_3">
</div>

<div class="date_area">
    <div class="title">明日と明後日は選択不可</div>
    <input type="text" id="date_4">
</div>

<div class="date_area">
    <div class="title">範囲指定版</div>
    <input type="text" id="date_5" name="date5">
</div>

<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 nowDate = new Date();

const date_1 = flatpickr(`#date_1`, {
    locale: 'ja', //日本語指定
    enableTime: true, //時間部分を選択可能に指定
    dateFormat: `Y-m-d H:i`, //年月日日時のフォーマット指定
    defaultDate: nowDate, //初期表示の年月日日時を指定
});

const date_2 = flatpickr(`#date_2`, {
    locale: 'ja', 
    enableTime: true,
    dateFormat: `Y-m-d H:i`,
    defaultDate: nowDate,
    minDate: new Date(nowDate.getFullYear(), nowDate.getMonth(), 1), //選択可能な最小日付
    maxDate: new Date(nowDate.getFullYear(), nowDate.getMonth()+1, 0), //選択可能な最大日付
});

const date_3 = flatpickr(`#date_3`, {
    locale: 'ja', 
    enableTime: true,
    dateFormat: `Y-m-d H:i`,
    defaultDate: nowDate,
    disable: [ //土日を選択不可に
        function(date) {
            return (date.getDay() === 0 || date.getDay() === 6);
        }
    ],
});

const date_4 = flatpickr(`#date_4`, {
    locale: 'ja', 
    enableTime: true,
    defaultDate: nowDate,
    dateFormat: `Y-m-d H:i`,
    disable: [ //指定日を選択不可に(YYYY-MM-DD形式の指定も可)
        nowDate.setDate( nowDate.getDate() + 1 ), 
        nowDate.setDate( nowDate.getDate() + 1 ) 
    ],
});

const date_5 = flatpickr(`#date_5`, {
    locale: 'ja', 
    mode: `range`, //範囲指定
});
</script>

年と月の表示順を逆にしたい場合

以下CSSを追記する。

<style>
.flatpickr-current-month {
    display: flex !important;
    justify-content: center !important;
    flex-direction:row-reverse !important;
}
</style>

所感

シンプルかつ高機能でスマホにも対応しているので今後使っていきたい。ただ、土日祝にCSSで装飾する場合はこちらのような対応が必要みたいで、その点は面倒かもしれない。

また、今回のライブラリはフラットなデザインだけど、こちらのライブラリだとマテリアルデザインなのでこれも試してみたいところ。