blocs/blocs: 入力インターフェース（ai-* クラス）
blocs/blocs: 入力インターフェース（ai-* クラス）
入力フォームに ai-* クラスを指定すると、機能が自動的に拡張されます。
ai-* クラス一覧
| クラス | 役割 |
|---|---|
| ai-datepicker | 日付選択用カレンダー入力 |
| ai-timepicker | 日付と時間の入力 |
| ai-phone | 電話番号の自動区切り |
| ai-select2 | 検索機能付きプルダウンメニュー |
| ai-upload | ファイルアップロード入力 |
サンプルコード
<input type="text" id="date" name="date" class="form-control ai-datepicker">
<input type="text" id="date_time" name="date_time" class="form-control ai-timepicker">
<input type="text" id="phone" name="phone" class="form-control ai-phone">
ai-upload とバリデーション
ai-upload クラスを付けた hidden input は、アップロード専用のバリデーションとしてテンプレート JSON キャッシュの upload キーに分離保存されます（コンパイラ内部では validateUpload 配列を経由）。通常のテキスト入力とは別ルートで検証されるため、ファイルアップロード画面ではこのクラスを使います（詳しくは No.5.5）。
<input type="hidden" id="file" name="file" class="ai-upload" />
独自の ai-* クラスの作成
resources/views/admin/autoinclude に、ai-* クラス名に対応した .html テンプレートを追加します（ai-datepicker → datepicker.html）。テンプレート内では data-bloc を使わず、内容がそのまま挿入される形式にします。
QA
検索できるプルダウンを作成したい
ai-select2 クラスを使用します。addOption で選択肢を動的に追加することも可能です。
複数選択できるプルダウンを作成したい
ai-select2 クラスに multiple 属性を追加し、name を pulldown[] のように記述します。