Plugins

更新日: 2019-12-12

プラグインは基本的にフックのセットで、インスタンスとオプションを受け取ります。

ユーザーが欲しがるような大抵の機能はプラグインで実現することができます。 flatpickrにはいくつかのプラグインが付属しています。

confirmDate

下記のいずれかを選択した場合に確認ボタンを表示します。

日付、時刻を選択した時
複数の日付を選択した時

デモ

HTML

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

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

JavaScript

const config =  {
  "enableTime": true,
  "plugins": [new confirmDatePlugin({})]
}
flatpickr('.flatpickr', config);

デフォルトではボタンにSVGアイコンが含まれていますが、ボタンを変更することができます。

以下が全てのオプションです。

{
  confirmIcon: "<i class='fa fa-check'></i>", // アイコンを変更したい場合はHTML形式で記述します
  confirmText: "OK ",
  showAlways: false,
  theme: "light" // or "dark"
}

デモ

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/confirmDate/confirmDate.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

JavaScript

config =  {
  "enableTime": true,
  "plugins": [new confirmDatePlugin({
    confirmIcon: "<i class='material-icons'>check</i>",
    confirmText: "おーけー ",
    showAlways: false,
    theme: "light" // or "dark"
  })],
}
flatpickr('.flatpickr', config);

weekSelect

週選択が可能になります。

デモ

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/weekSelect/weekSelect.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

JavaScript

const config = {
  "plugins": [new weekSelectPlugin({})],
  "onChange": [function(){
    // 週番号を抽出します。
    // note: "this"はflatpickrインスタンスをバインドしています。
    const weekNumber = this.selectedDates[0]
        ? this.config.getWeek(this.selectedDates[0])
        : null;
 
    console.log(weekNumber);
  }]
};
flatpickr('.flatpickr', config);

* scriptタグで読み込む場合、new weekSelectPlugin({})ではなくnew weekSelect({})として下さい。

rangePlugin(β)

日付の範囲を2つの入力欄で入力可能になります。

デモ

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>
<div style="display: flex;">
  <p>
    <span>Date1</span>
    <br>
    <input class="fp_range" data-id="rangePlugin" type="text" placeholder="Select Date.." readonly="readonly">
  </p>
  <p>
    <span>Date2</span>
    <br>
    <input class="fp_range" id="secondRangeInput" type="text" placeholder="Select Date.." readonly="readonly">
  </p>
</div>

JavaScript

const config = {
  "plugins": [new rangePlugin({ input: "#secondRangeInput"})]
};
flatpickr('.flatpickr', config);

Date1

Date2

MinMaxTimePlugin(β)

日別でminTime、maxTimeを設定することができます。

デモ

2025/01/10はPM4:00～PM10:00の範囲内だけを選択することができますが、それ以外の日はすべての時間を選択することができます。

HTML

<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/minMaxTimePlugin.js"></script>
<input class="flatpickr" type="text" placeholder="Select Date.." readonly="readonly">

JavaScript

config = {
  enableTime: true,
  minDate: "2025",
  plugins: [
    new minMaxTimePlugin({
      table: {
        "2025-01-10": {
          minTime: "16:00",
          maxTime: "22:00"
        }
      }
    })
  ]
};
flatpickr('.flatpickr', config);

monthSelectPlugin

月のみを表示するカレンダーを生成します。

HTML

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css">
  <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
</head>

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

JavaScript

config = {
  plugins: [
    new monthSelectPlugin({
      shorthand: true, // デフォルトはfalse
      dateFormat: "m.y", // デフォルトは"F Y"
      altFormat: "F Y", // デフォルトは"F Y"
      theme: "dark" // デフォルトは"light"
    })
  ]
};
flatpickr('.flatpickr', config);

このコンテンツはGregory Petrosyan(chmln)によるflatpickrドキュメントを翻訳/改変したものです。