> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/time-picker.md). # Time Picker Time Pickerは主にフォームの送信や表示の際に使う時刻入力や表示用のコンポーネントです。Dashcombが提供しているTime Pickerは、通常のHTMLの `` をベースにして、管理画面の用途に合わせて簡単なバリデーション機能や期間指定機能を内蔵しています。 バリデーション機能は入力必須、有効開始時刻、有効終了時刻、フォーマットなどを含みます。[Date Pickerコンポーネント](/dashcomb-help-center/ide/ui-component/date-picker.md)とセットで使うことも可能です。 ## プロパティ Time Pickerコンポーネントには、以下のプロパティが含まれています。
### 共通 **オブジェクト** Time Pickerオブジェクトの変数名です。Time Pickerをドラッグ＆ドロップすると、そのオブジェクトが自動的に `timePicker1`、`timePicker2`... と名付けられます。 ここで設定した変数名は、構文 `{{オブジェクト名.プロパティ}}` でオブジェクトを参照するために利用できます。 （例）`{{timePicker1.value}}` で `timePicker1` の値を取得することができます。 利用できるオブジェクトとプロパティは、[インスペクターメニュー](/dashcomb-help-center/ide/region/inspector-region.md) で確認できます。 #### 非表示 トグルスイッチをONにすると、Time Pickerコンポーネントが非表示になります。 #### 無効 トグルスイッチをONにすると、Time Pickerコンポーネントが無効になり、入力できなくなります。 #### 入力必須 トグルスイッチをONにすると、Time Pickerコンポーネントが必須入力になります。 ### データ **ラベル文字** Time Pickerコンポーネントの項目名を表すラベルテキストです。Time Pickerコンポーネントをドラッグ＆ドロップすると、自動的に `TimePicker` に設定されます。 `{{オブジェクト名.プロパティ}}` 構文を用いて、動的に設定することができます。 {% hint style="info" %} `{{}}` 構文については、[オブジェクトやデータの参照](/dashcomb-help-center/ide/obujekutoyadtano.md) のページを参照してください。 {% endhint %} #### 入力ヒント 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%です。