従来、日付選択用のインターフェースには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というライブラリを使用しており、公式ドキュメントには設定が多く公開されています。詳しくは公式ドキュメントをご覧ください。

• Options - flatpickr

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

例）モバイル端末でもFlatpickrを有効にする設定

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

例）現在の日付から4日後〜20日後まで選択する設定

ACMS.Ready(function() {
  var minDate = new Date();
  var maxDate = new Date();
  minDate.setDate(minDate.getDate() + 4);
  maxDate.setDate(maxDate.getDate() + 20);
  ACMS.Config.flatDatePickerConfig.minDate = minDate.getFullYear() + '-' + (parseInt(minDate.getMonth(), 10) + 1) + '-' + minDate.getDate();
  ACMS.Config.flatDatePickerConfig.maxDate = maxDate.getFullYear() + '-' + (parseInt(maxDate.getMonth(), 10) + 1) + '-' + maxDate.getDate();
});

例）特定の曜日を無効化する設定

以下の例では、土曜日（6）と日曜日（0）が無効化されます。

ACMS.Ready(function() {
  ACMS.Config.flatDatePickerConfig.disable = [
    function(date) {
      return (date.getDay() === 0 || date.getDay() === 6);
    }
  ];
});

各曜日を指定する際は、下記の値を指定してください。

時間選択のUI

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

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

時間：

EC テーマを改変せず利用している場合は、themes/square@ec/include/parts/card-form.html を次のように変更します。

<div
  id="js-sq-card-container"
  data-square-three-d-secure="true"
  data-square-amount="\{total\}"
  data-square-currency-code="JPY"
  data-square-intent="CHARGE"
  data-square-seller-keyed-in="false"
  data-square-customer-initiated="true"
  data-square-billing-contact-given-name="\\{name\\}"
  data-square-billing-contact-family-name=""
  data-square-billing-contact-email="\\{email\\}"
  data-square-billing-contact-phone="\\{tel\\}"
  data-square-billing-contact-country-code="JP"
  data-square-billing-contact-postal-code="\\{postal-code\\}"
  data-square-billing-contact-state="\\{pref\\}"
  data-square-billing-contact-city="\\{address1\\}"
  data-square-billing-contact-address-line1="\\{address2\\}"
  data-square-billing-contact-address-line2="\\{address3\\}"
>
  <!-- Squareのカード入力用コンポーネントが表示されます -->
</div>

3Dセキュア機能を有効にするためには data-square-three-d-secure 属性の値に true を設定し、決済情報及び決済者情報を設定してください。

各種属性についての説明は以下になります。

2025年3月末までの導入義務化に向け、ご協力のほど何卒よろしくお願いいたします。

a-blog cmsでは、任意の入力フィールド内にあるテキストをクリックした際に、テキストを全選択状態にする設定が標準で実装されています。（Ver.1.2.1より）入力フィールド内のテキストをコピーしたい場合などに便利です。

デモ

URL

デフォルトの設定

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

clickSelectionInputTextMark : ':text.url, textarea.js-click-selection, :text.js-click-selection',

使い方

例）clickSelectionInputTextMarkで「:text.url」と指定した場合

<p>URL <input id="textfield" class="url" type="text" value="{url}" name="textfield"/></p>

テキストを自動選択したい要素に、class="url"と記述します。