Stripe Apps の DataField コンポーネント
DateField コンポーネントを使用して、ユーザーから日付情報を収集します。
DateField コンポーネントをアプリに追加するには、以下のようにします。
import {DateField} from '@stripe/ui-extension-sdk/ui';
以下に、ラベルと説明が設定された DateField コンポーネントのプレビューを示します。
<DateField label="Date of birth" description="Enter your birthday" />
DateField のプロパティー
| プロパティー | タイプ |
|---|---|
| オプション
Specifies the initial value that a user can change. |
| オプション
コントロールのラベルの横にレンダリングされる説明テキスト。 |
| オプション
要素を無効化するかどうかを設定します。選択できなくなります。 |
| オプション
コントロールの下に表示されるエラーテキスト。 |
| オプション
指定した要素を視覚的に非表示にします。非表示の要素は引き続き存在しており、スクリーンリーダーに表示されます。 |
| オプション
要素が無効な状態であるかどうかを設定します。これは、表示専用のプロパティであり、フォーム送信を妨げるものではありません。 |
| オプション
コントロールを説明するテキスト。表示され、クリック可能になります。 |
| オプション
An onChange-alike event that fires only when the change results in a valid date. Identical behavior to |
| オプション
コンポーネントのサイズ。 |
| オプション
Controls the input’s text. When you pass this prop, you must also pass an |
サイズ
各サイズの DateField は、同じサイズの TextField と一致します。ただし、TextField と同じ方法で日付入力の幅を広げることはできません。
<DateField label="Date of birth (small)" description="Enter your birthday" size="small" /> <DateField label="Date of birth (medium)" description="Enter your birthday" size="medium" /> <DateField label="Date of birth (large)" description="Enter your birthday" size="large" />
エラー
日付に問題があることを示すエラーメッセージを指定できます。
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2099-02-31" invalid error="Invalid birthday" />
無効
ユーザーが変更できないようにする場合、DateField を無効にします。
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" disabled />
要素を非表示にする
スクリーンリーダーのアクセシビリティーを維持しながら、ラベルや説明など、DateField コンポーネントの要素を視覚的に非表示にすることができます。
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" hiddenElements={['description', 'label']} />
イベント
onChange プロパティの動作は、ネイティブの <input type="date" /> HTML 要素と似ています。値が返されるのは、有効な日付である場合のみです。onChange ハンドラはキーストロークごとに呼び出されることはなく、DateField を制御入力にすることはできません。
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log(e.target.value); }} />
onChange の横にあるイベントのプロパティー (先頭文字は on) は、DateField コンポーネントの年、月、日の 3 つのセクションのそれぞれで独立して実行されます。
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log('change', e); }} />