# Date Picker

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

バリデーション機能は入力必須、有効開始日、有効終了日、フォーマットなどを含みます。 [時刻ピッカー](https://docs.dashcomb.com/dashcomb-help-center/ide/ui-component/time-picker)とセットで使うことも可能です。

## プロパティ

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

<figure><img src="https://3498714457-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgIESKBveovlGvQ1BqYEP%2Fuploads%2Fgit-blob-dfe104d7a8bb0018315c72e7211d563f61d553c2%2FUI%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%EF%BC%9A%E6%97%A5%E4%BB%98%E3%83%94%E3%83%83%E3%82%AB%E3%83%BC.png?alt=media" alt=""><figcaption></figcaption></figure>

### 共通 <a href="#common" id="common"></a>

**オブジェクト**

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

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

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

利用できるオブジェクトとプロパティは、[インスペクターメニュー](https://docs.dashcomb.com/dashcomb-help-center/ide/region/inspector-region) で確認できます。

#### 非表示

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

#### 無効

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

#### 入力必須

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

### データ <a href="#data" id="data"></a>

**ラベル文字**

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

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

{% hint style="info" %}
`{{}}` 構文については、[オブジェクトやデータの参照](https://docs.dashcomb.com/dashcomb-help-center/ide/obujekutoyadtano) のページを参照してください。
{% endhint %}

#### 入力ヒント

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` に反映することができます。

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

**日付種別**

<table><thead><tr><th width="130">項目名</th><th>設定内容</th></tr></thead><tbody><tr><td>日</td><td>月単位で日付を表示します。クリックすると選択した日付が入力されます。</td></tr><tr><td>週</td><td>月単位で日付を表示します。クリックすると選択した週番号が入力されます。</td></tr><tr><td>月</td><td>年単位で月を表示します。クリックすると、その年、月が入力されます。</td></tr><tr><td>クオーター</td><td>年単位でクオーターを表示します。クリックすると、そのクオーターの名称が入力されます。</td></tr><tr><td>年</td><td>12年単位で年を表示します。クリックすると、その年が入力されます。</td></tr></tbody></table>

**期間指定**

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

**日付指定**

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

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

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

### アクション

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

#### **onChange**

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

**onForcus**

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

**onBlur**

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

### 外観 <a href="#appearance" id="appearance"></a>

#### **ラベル表示**

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

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

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

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