# Stripe Apps の DataField コンポーネント

DateField コンポーネントを使用して、ユーザーから日付情報を収集します。

# v8

> This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/datefield?app-sdk-version=8.

`DateField` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {DateField} from '@stripe/ui-extension-sdk/ui';
```

以下に、ラベルと説明が設定された `DateField` コンポーネントのプレビューを示します。

### DateField のプロパティー

| プロパティー           | タイプ                                                                                                                                                                 |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `defaultValue`   | (オプション)
  `string | undefined`

  ユーザーが変更できる初期値を指定します。                                                                                                              |
| `description`    | (オプション)
  `string | undefined`

  コントロールのラベルの横にレンダリングされる説明テキスト。                                                                                                     |
| `disabled`       | (オプション)
  `boolean | undefined`

  要素を無効化するかどうかを設定します。選択できなくなります。                                                                                                   |
| `error`          | (オプション)
  `string | undefined`

  コントロールの下に表示されるエラーテキスト。                                                                                                            |
| `hiddenElements` | (オプション)
  `("label" | "description" | "error")[] | undefined`

  指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。                                             |
| `invalid`        | (オプション)
  `boolean | undefined`

  要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。                                                                     |
| `label`          | (オプション)
  `React.ReactNode`

  コントロールを説明するテキスト。表示され、クリック可能になります。                                                                                                    |
| `onChange`       | (オプション)
  `((event: {     target: {         value: string;     }; }) => void) | undefined`

  変更が有効な日付になった場合にのみ起動する onChange に似たイベント。`<input type="date" />` と同じ動作。 |
| `size`           | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                                                                              |
| `value`          | (オプション)
  `string | undefined`

  入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                                                                |

## サイズ

各サイズの `DateField` は、同じサイズの `TextField` と一致します。ただし、`TextField` と同じ方法で日付入力の幅を広げることはできません。

## エラー

日付に問題があることを示すエラーメッセージを指定できます。

## 無効

ユーザーが変更できないようにする場合、`DateField` を無効にします。

## 要素を非表示にする

スクリーンリーダーのアクセシビリティーを維持しながら、ラベルや説明など、`DateField` コンポーネントの要素を視覚的に非表示にすることができます。

## イベント

`onChange` プロパティの動作は、ネイティブの `<input type="date" />` HTML 要素と似ています。値が返されるのは、有効な日付である場合のみです。`onChange` ハンドラはキーストロークごとに呼び出されることはなく、`DateField` を[制御入力](https://reactjs.org/docs/forms.html#controlled-components)にすることはできません。

`onChange` の横にあるイベントのプロパティー (先頭文字は `on`) は、`DateField` コンポーネントの年、月、日の 3 つのセクションのそれぞれで独立して実行されます。


# v9

> This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/datefield?app-sdk-version=9.

`DateField` コンポーネントをアプリに追加するには、以下のようにします。

```js
import {DateField} from '@stripe/ui-extension-sdk/ui';
```

以下に、ラベルと説明が設定された `DateField` コンポーネントのプレビューを示します。

### DateField のプロパティー

| プロパティー           | タイプ                                                                                                                     |
| ---------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `defaultValue`   | (オプション)
  `string | undefined`

  ユーザーが変更できる初期値を指定します。                                                                  |
| `description`    | (オプション)
  `string | undefined`

  コントロールのラベルの横にレンダリングされる説明テキスト。                                                         |
| `disabled`       | (オプション)
  `boolean | undefined`

  要素を無効化するかどうかを設定します。選択できなくなります。                                                       |
| `error`          | (オプション)
  `string | undefined`

  コントロールの下に表示されるエラーテキスト。                                                                |
| `hiddenElements` | (オプション)
  `("label" | "description" | "error")[] | undefined`

  指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。 |
| `invalid`        | (オプション)
  `boolean | undefined`

  要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。                         |
| `label`          | (オプション)
  `React.ReactNode`

  コントロールを説明するテキスト。表示され、クリック可能になります。                                                        |
| `onChange`       | (オプション)
  `((event: string) => void) | undefined`                                                                       |
| `size`           | (オプション)
  `("small" | "medium" | "large") | undefined`

  コンポーネントのサイズ。                                                  |
| `value`          | (オプション)
  `string | undefined`

  入力のテキストを制御します。このプロパティを渡すときには、渡された値を更新する `onChange` ハンドラも渡す必要があります。                    |

## サイズ

各サイズの `DateField` は、同じサイズの `TextField` と一致します。ただし、`TextField` と同じ方法で日付入力の幅を広げることはできません。

## エラー

日付に問題があることを示すエラーメッセージを指定できます。

## 無効

ユーザーが変更できないようにする場合、`DateField` を無効にします。

## 要素を非表示にする

スクリーンリーダーのアクセシビリティーを維持しながら、ラベルや説明など、`DateField` コンポーネントの要素を視覚的に非表示にすることができます。

## イベント

`onChange` プロパティの動作は、ネイティブの `<input type="date" />` HTML 要素と似ています。値が返されるのは、有効な日付である場合のみです。`onChange` ハンドラはキーストロークごとに呼び出されることはなく、`DateField` を[制御入力](https://reactjs.org/docs/forms.html#controlled-components)にすることはできません。

`onChange` の横にあるイベントのプロパティー (先頭文字は `on`) は、`DateField` コンポーネントの年、月、日の 3 つのセクションのそれぞれで独立して実行されます。


## See also

- [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md)
- [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md)
- [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)