【お知らせ】
この翻訳ページは下記サイトに移行します。下記リンク先よりご確認ください。
これに伴い当ページの更新を停止します。
[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);