Date Picker

Date Pickerは主にフォームの送信や表示の際に使う日付入力や表示用のコンポーネントです。Dashcombが提供しているDate Pickerは、通常のHTMLの <input type="date"> をベースにして、管理画面の用途に合わせて、簡単なバリデーション機能や期間指定機能を内蔵しています。

バリデーション機能は入力必須、有効開始日、有効終了日、フォーマットなどを含みます。 時刻ピッカーとセットで使うことも可能です。

プロパティ

Date Pickerコンポーネントには、以下のプロパティが含まれています。

共通

オブジェクト

Date Pickerオブジェクトの変数名です。Date Pickerをドラッグ＆ドロップすると、そのオブジェクトが自動的に datePicker1、datePicker2... と名付けられます。

ここで設定した変数名は、構文 {{オブジェクト名.プロパティ}} でオブジェクトを参照するために利用できます。

（例）{{datePicker1.value}} で datePicker1 の値を取得することができます。

利用できるオブジェクトとプロパティは、インスペクターメニュー で確認できます。

非表示

トグルスイッチをONにすると、Date Pickerコンポーネントが非表示になります。

無効

トグルスイッチをONにすると、Date Pickerコンポーネントが無効になり、入力できなくなります。

入力必須

トグルスイッチをONにすると、Date Pickerコンポーネントが必須入力になります。

データ

ラベル文字

Date Pickerコンポーネントの項目名を表すラベルテキストです。Date Pickerコンポーネントをドラッグ＆ドロップすると、自動的に DatePicker に設定されます。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

INFO

{{}} 構文については、オブジェクトやデータの参照 のページを参照してください。

入力ヒント

Date Pickerコンポーネントのプレースホルダーです。Date Pickerコンポーネントに何も入力されていない場合に、入力例として表示されます。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

デフォルト値

Date Pickerコンポーネントの初期値です。画面を開いた時点で、value 属性初期値は空文字列（""）です。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

（例）オブジェクト datePicker1 のデフォルト値に 2022-10-03 を入力することで、画面初期表示の際に、このDate Pickerの入力欄に予め 2022-10-03 が入力されています。

（例）オブジェクト datePicker2 のデフォルト値に {{datePicker1.value}} を入力することによって、datePicker1 に入力した内容がリアルタイムで datePicker2 に反映することができます。

フォーマット

YYYY-MM-DD、YYYY-MM、MM-DDなどのような日付のフォーマットです。画面を開いた時点で、Format 属性初期値は空文字列（""）です。その場合 YYYY-MM-DD と同じ効果になります。

{{オブジェクト名.プロパティ}} 構文を用いて、動的に設定することができます。

（例）オブジェクト datePicker1 のフォーマットに YY-MM-DD を入力することで、このDate Pickerで日付 2023-02-14 を選ぶと、入力欄に 23-02-14 が入力されています。

（例）オブジェクト datePicker2 のフォーマットに {{datePicker1.format}} を入力することによって、datePicker1 に入力したフォーマットがリアルタイムで datePicker2 に反映することができます。

但し、 {{オブジェクト名.プロパティ}} 構文を用いて動的に設定した際、日付のデフォルト値を取得できない場合があります。

日付種別

項目名	設定内容
日	月単位で日付を表示します。クリックすると選択した日付が入力されます。
週	月単位で日付を表示します。クリックすると選択した週番号が入力されます。
月	年単位で月を表示します。クリックすると、その年、月が入力されます。
クオーター	年単位でクオーターを表示します。クリックすると、そのクオーターの名称が入力されます。
年	12年単位で年を表示します。クリックすると、その年が入力されます。

期間指定

トグルスイッチをONにすると、開始日から終了日の幅を持たせて選択できます。

日付指定

トグルスイッチをONにすると、有効な日付の期間を制限できます。

開始… 有効な日付の開始日

終了… 有効な日付の終了日

アクション

Date Picker コンポーネントのアクションは、以下を設定することができます。

onChange

Date PickerコンポーネントのonChange イベントの発生時（Date Pickerの入力内容が変更された時）に、指定アクションを実行できます。

onForcus

Date PickerコンポーネントのonForcus イベントの発生時（Date Pickerがフォーカス状態になった時）に、指定アクションを実行できます。

onBlur

Date PickerコンポーネントのonBlur イベントの発生時（Date Pickerがフォーカス状態でなくなった時）に、指定アクションを実行できます。

外観

ラベル表示

Date Pickerコンポーネントのラベルテキストの表示・非表示を切り替えます。

トグルスイッチをOFFにすると、Date Pickerコンポーネントにラベルが表示されなくなりますが、Date Pickerコンポーネント本体に影響はありません。

以下の項目で表示を調整できます。

項目名	設定内容
ラベル整列	ラベルテキストの行内の表示位置を設定できます。右寄せ、左寄せ、中央揃え の3つから選択できます。
ラベル位置	ラベルテキストと入力欄の並べ方を設定できます。上下並べ、または左右並べから選択できます。
ラベル横幅	ラベル位置を「左右並べ」に設定したときの、ラベルテキストの表示領域の横幅を指定できます。初期値は33%です。