flatpickr - にほんご。

Plugins

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

通常ユーザーが欲しがるような機能はプラグインで実現することができます。 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

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

デモ

HTML
<script src="https://npmcdn.com/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(){
    // 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);

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


rangePlugin(β)

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

デモ

HTML
<script src="https://npmcdn.com/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

© 2017 Gregory Petrosyan Released under the MIT license

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