Plugins

【お知らせ】 この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[flatpickr - Japanese] - http://tr.you84815.space/flatpickr/
上記サイトは随時更新していきますので、今後とも、宜しくお願い致します。

---

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

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

confirmDate

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

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

サンプル

HTML

<script src="https://npmcdn.com/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://npmcdn.com/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: "dark" // or "light"
  })],
}
flatpickr('.fp_confirm_date_opt', config);

weekSelect

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

JavaScript

const config =  new Flatpickr({
  "plugins": [new weekSelectPlugin({})],
  "onChange": [function(){
    // extract the week number
    // note: "this" is bound to the flatpickr instance
    const weekNumber = this.selectedDates[0]
        ? this.config.getWeek(this.selectedDates[0])
        : null;

    console.log(weekNumber);
  }]
});
flatpickr('.flatpickr', config);