日付選択カレンダー(flatpickr)

従来、日付選択用のインターフェースにはjQuery UIを使用しておりましたが、Ver.2.8.0より導入したフラットでシンプルな日付選択用のJavaScriptライブラリ 「flatpickr」 の使い方を説明します。

指定したclass属性さえ適用すれば、任意の入力フィールドで自由にご使用いただけます。



デフォルトの設定

この機能の設定は、/js/config.jsの以下の箇所にあります。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。
詳しくは「組み込みJSについて:設定を編集する」を参照してください。

flatDatePicker: '.js-datepicker2',
flatDatePickerConfig: {
  allowInput: true,
  locale: ACMS.i18n.lng,
  dateFormat: 'Y-m-d'
},
flatTimePicker: '.js-timepicker',
flatTimePickerConfig: {
  allowInput: true,
  locale: ACMS.i18n.lng,
  enableTime: true,
  noCalendar: true,
  dateFormat: "H:i:S",
  time_24hr: true
},

使い方

日付選択のUI

<input type="text" name="date" class="js-datepicker2" size="15" placeholder="2009-06-23" />

このように記述すると、入力フィールドをクリックしたときに日付選択カレンダーが表示され、日付をクリックすると入力フィールドに日付が入力されます。

日付:

config.jsにはないFlatpickrの設定をする

js-datepicker2の日付選択のUIにはFlatpickrというライブラリを使用しており、公式ドキュメントには設定が多く公開されています。詳しくは公式ドキュメントをご覧ください。

公式ドキュメントに公開されているConfig OptionにACMS.Config.flatDatePickerConfig.を頭につけて値を渡すと、Flatpickrのその他の設定を利用できます。

例えば、以下はモバイル端末でもFlatpickrを有効にする設定の記述です。

ACMS.Ready(function() {
  ACMS.Config.flatDatePickerConfig.disableMobile = true;
});

その他にも、JSファイルに以下のように追加すると現在の日付から4日後〜20日後まで選択できる日付選択のUIになります。

ACMS.Ready(function() {
  var date = new Date();
  var minDate = date.setDate( date.getDate() + 4 );
  var maxDate = date.setDate( date.getDate() + 20 );
  ACMS.Config.flatDatePickerConfig.minDate = minDate;
  ACMS.Config.flatDatePickerConfig.maxDate = maxDate;
});

時間選択のUI

<input type="text" name="date" class="js-timepicker" size="15" />

このように記述すると、入力フィールドをクリックしたときに時間選択のためのUIが表示され、時刻を選択するとその時刻が挿入されます。

時間: