[ 目次 ]

• はじめに
• flatpickrインストール
• 利用方法
• flatpickrの読み込み
• サンプル
• Optionの設定方法
• 業務でのflatpickrの利用例

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。

今回は、「flatpickr」のご紹介になります。シンプルなDatepickerを探していて見つけたライブラリです。「flatpickr」の利用方法をまとめていきます。

flatpickr

flatpickrインストール

CDNでも提供されていますが、npmのライブラリが用意されていますのでそちらを利用して今回はインストールしました。

■ npmを利用する場合

$ npm install flatpickr

■ yarnを利用する場合

$ yarn add flatpickr

利用方法

flatpickrの読み込み

es6で以下のようにimportして利用することができます。

import flatpickr from "flatpickr";
import 'flatpickr/dist/flatpickr.css';

サンプル

<input type="text" class="js-flatpickr">

flatpickr('.js-flatpickr')

Optionの設定方法

■ jsでtippyの引数にOptionを渡す方法

flatpickr('.js-flatpickr', {
    enableTime: true,
    dateFormat: "Y-m-d H:i",
})

flatpickr は色々な形式のdatepickerを実現することができます。

https://flatpickr.js.org/examples/

こちらのサンプルから色々なOptionをぜひ試してみてください。

業務でのflatpickrの利用例

今回の業務では検索条件で登録日や最終ログイン日時の範囲検索にflatpickrを利用しました。

汎用的に利用する為、html内のdata属性にflatpickrのOptionを持たせるようにしています。
以下がソースコードの抜粋となります。

■ HTML

<div class="form-group col-lg-4">
  <label>最終ログイン日時</label>
  <input
    name="range_last_login_at"
    type="text"
    class="form-control js-flatpickr"
   data-flatpickr='{ "mode": "range" }'
  >
</div>

※ data-flatpickr属性にjson文字列としてOptionを設定します。

■ javascript(es6)

$('.js-flatpickr').each((index, e) => {
  const $element = $(e)
  let option = $element.attr('data-flatpickr')
  option = option ? JSON.parse(option) : {}
  flatpickr(e, option)
})

※ 今回のプロジェクトでは、jQueryを利用した形になっています。