Time Picker

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

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

プロパティ

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

共通

オブジェクト

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

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

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

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

非表示

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

無効

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

入力必須

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

データ

ラベル文字

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

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

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

入力ヒント

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

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

デフォルト値

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

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

（例）オブジェクト timePicker1 のデフォルト値に 14:23:45 を入力することで、画面初期表示の際に、このTime Pickerの入力欄に予め 14:23:45 が入力されています。

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

フォーマット

hh:mm:ss、HH:mm:ss、h:mm:ss等の時刻のフォーマットです。画面を開いた時点で、Format 属性初期値は空文字列（""）です。その場合 HH:mm:ss と同じ効果になります。

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

（例）オブジェクト timePicker1 のフォーマットに h:mm:ss を入力することで、このTime Pickerで時刻 16:23:45 を選ぶと、入力欄に 4:23:45 が入力されています。

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

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

期間指定

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

時刻指定

トグルスイッチをONにすると、選択できる有効な時間帯を制限できます。

開始… 有効な時刻の開始時刻

終了… 有効な時刻の終了時刻

アクション

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

onChange

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

onForcus

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

onBlur

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

外観

ラベル表示

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

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

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

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