フォーム

目次

日付選択カレンダー

a-blog cmsでは、日付をカレンダー表示から入力する「日付選択カレンダー」の設定が標準で実装されています。(Ver. 1.2.1より)



デモ

日付:

デフォルトの設定

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

    // 日付選択カレンダー
    dpicMark            : 'input:text[name$=date]',
    dpicConfig          :
    {
        closeText       : '閉じる',
        prevText        : '<前月',
        nextText        : '次月>',
        currentText     : '今日',
        monthNames      : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        monthNamesShort : ['1月','2月','3月','4月','5月','6月', '7月','8月','9月','10月','11月','12月'],
        dayNames        : ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
        dayNamesShort   : ['日曜','月曜','火曜','水曜','木曜','金曜','土曜'],
        dayNamesMin     : ['日','月','火','水','木','金','土'],
        dateFormat      : 'yy-mm-dd',
        firstDay        : 0,
        isRTL           : false
    },


dpicMark 日付選択カレンダーを表示させるHTMLの要素・属性を指定します。
dpicConfig 日付選択カレンダーの表示設定です。

使い方

config.jsで指定した要素・属性をHTMLに記述します。

例)dpicMarkで「input:text[name$=date]」と指定した場合

<input type="text" name="date" value="2009-06-23" size="15" />

このように記述すると、入力フィールドをクリックしたときに日付選択カレンダーが表示され、日付をクリックすると入力フィールドに日付が入力されます。(日付の形式を変更するには、config.jsの「dateFormat」の値を変更してください。)

日付選択カレンダー(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が表示され、時刻を選択するとその時刻が挿入されます。

時間:

テキストの自動選択

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 ここで指定したHTML要素やclassで、テキストの自動選択が可能になります。

使い方

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

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

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

プレースホルダー【非推奨】

現在は各ブラウザでplaceholder属性が実装されているため、HTMLのplaceholder属性の使用を推奨しております

a-blog cmsでは、フォームのテキスト入力エリア内にあらかじめ任意の文字を表示しておくプレースホルダーの機能の設定が標準で実装されています。(Ver. 1.3.0より)

デモ

<input type="text" name="iebug" value="" style="display:none;" class="iebug" />
<input type="submit" name="ACMS_POST_2GET" value="検索" />
<input type="hidden" name="tpl" value="/search.html" />
<input type="hidden" name="bid" value="%{BID}" />

デフォルトの設定

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

//-------------
// placeholder
placeholderMark   : '.js-placeholder',
placeholderColor  : 'silver',


placeholderMark ここで指定したセレクタがプレースホルダーになります。
placeholderColor プレースホルダーの文字色です。色のキーワードやRGB値(#FF0000, rgb(255,0,0),rgb(100%,0%,0%))で指定できます。

使い方

HTML

指定したクラスをHTMLのinput要素もしくはtextarea要素に記述します。プレースホルダーとして表示する文字列は、title属性に記述します。

例)placeholderMarkで「.js-placeholder」と指定した場合

<form action="" method="post" name="searchForm">
  <input type="text" name="keyword" value="" size="15" class="js-placeholder" title="キーワードを入力" />
  <input type="text" name="iebug" value="" style="display:none;" class="iebug" />
  <input type="submit" name="ACMS_POST_2GET" value="検索" />
  <input type="hidden" name="tpl" value="/search.html" />
  <input type="hidden" name="bid" value="6" />
</form>