flatpickr - にほんご。

Plugins

更新日: 2018-09-04

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

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

confirmDate

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

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

デモ

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
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(β)

日別でminTimemaxTimeを設定することができます。

デモ

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);


© 2017 Gregory Petrosyan Released under the MIT license

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