[JS] flatpickr.jsを使ってみる

[JS] flatpickr.jsを使ってみる

web

flatpickr

flatpickrは、jQueryに依存せず、単独で動作する軽量なDatepickerです。
flatpickr

実装

<head>
    <link rel="stylesheet" href="https://unpkg.com/flatpickr/dist/flatpickr.min.css">
    <script src="https://unpkg.com/flatpickr"></script>
</head>

flatpickrの最新バージョンは、CDNで読み込むことができます。
<head>内へ上記を書くだけで、導入は完了である。
かんたんだね。

使ってみよう

<input class="flatpickr" type="text" placeholder="Select Date..">

HTMLはinputに任意のIDかクラスをつけるだけです。
後ほど、このクラスかIDを指定してflatpickrを呼び出してあげれば、ただのinputが立派なDatepickerに早変わりします。

flatpickrは何パターンかの呼び出し方があり、jQueryで呼び出すこともできる。
いずれかお好きなのをどうぞ。

<script>
    document.getElementsByClassName("myClass").flatpickr({..config}); //バニラJSでクラスを指定して呼び出す
    document.getElementById("myID").flatpickr(); //バニラJSでIDを指定して呼び出す
    $(".myClass").flatpickr(); //jQueryでクラスを指定して呼び出す
    $("#myID").flatpickr(); //jQueryでIDを指定して呼び出す
</script>

日本語化

flatpickrの日本語化は、下記を<script>内に追記するだけよいです。
ただし、上記の呼び出すスクリプトの前に書かなければ反映されないようなので注意してください。

//月を日本語化する
Flatpickr.l10n.months.longhand = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
//曜日を日本語化する
Flatpickr.l10n.weekdays.shorthand = ['日', '月', '火', '水', '木', '金', '土'];

画面の右端からはみ出す問題

flatpickrは、親のinputが画面の右端にあった場合、カレンダーが画面からはみ出してしまいます(2016年8月現在)。
ちょうど右端にinputを置きたかったので、中身に手を入れてなんとかしてみました。

    function positionCalendar() {
        const calendarHeight = self.calendarContainer.offsetHeight,
            calendarWidth = self.calendarContainer.offsetWidth, //書き足し部分。カレンダーのWidthを取得
            input = (self.altInput || self.input),
            inputBounds = input.getBoundingClientRect(),
            distanceFromBottom = window.innerHeight - inputBounds.bottom + input.offsetHeight,
            outOfWindow = inputBounds.left + calendarWidth; //書き足し部分。inputのleft位置とカレンダー幅を足す

            let top,
                left = (window.pageXOffset + inputBounds.left);

            if (outOfWindow > window.innerWidth) { //書き足し部分。inputのleft位置とカレンダー幅を足した値がウィンドウ幅より大きい場合
                left = (window.innerWidth - calendarWidth); // カレンダーの位置を(ウィンドウ幅 - カレンダー幅)にする
            }

            // 以下略
    }

※コードはバージョンによって違うと思われるので、書き換えは自己責任で行ってください。
まず、flatpickr.jsの中からpositionCalendar()を探します。
見つけたら、上部のconst部分にcalendarWidth = self.calendarContainer.offsetWidthとover = inputBounds.left + calendarWidthを書き足す。
let top,行の下にif文を書き足し、動けばOKです。

矢印の位置が気になる人は

これでカレンダーは画面の右端に表示されるようになるのだけど、このままだとカレンダー下部の矢印がinputからはみ出してしまう。
気になる人は、下記のようにif文にself.calendarContainer.classList.add("arrow-center");を追加しよう。
そしてflatpickr.cssに.arrow-centerに対するスタイルを書き足せば、矢印がカレンダーの中央に来てくれる。
大抵の場合はこれでなんとかなるはず。

なぜクラス追加などというまわりくどいことをするかというと、CSSの::beforeは擬似要素なので、JSから直接操作することが出来ないのです。
(追記: 出来なくはないけどめんどくさい)
そのため、親要素にクラスを追加し、CSSで調整するしかありません。
動的な値が使えないので結構めんどくさい。本当はinputのleft位置に矢印を置きたいところだけど…。

if (outOfWindow > window.innerWidth) { //書き足し部分。inputのleft位置とカレンダー幅を足した値がウィンドウ幅より大きい場合
    left = (window.innerWidth - calendarWidth); // カレンダーの位置を(ウィンドウ幅 - カレンダー幅)にする
    self.calendarContainer.classList.add("arrow-center"); // 下部の矢印を操作するためにクラスを追加
}

.flatpickr-calendar.arrow-center.arrowBottom:after,
.flatpickr-calendar.arrow-center.arrowBottom:before {
  left: 50%;
}
目次へ戻る