DateField component for Stripe Apps
Use the DateField component to collect date information from users.
To add the DateField component to your app:
import {DateField} from '@stripe/ui-extension-sdk/ui';
The following shows a preview of a DateField component with a label and a description:
<DateField label="Date of birth" description="Enter your birthday" />
DateField props
| Property | Type |
|---|---|
| Optional
Specifies the initial value that a user can change. |
| Optional
Descriptive text that will be rendered adjacent to the control’s label. |
| Optional
Sets whether or not the element should be disabled. Prevents selection. |
| Optional
Error text that will be rendered below the control. |
| Optional
Visually hides the specified elements. The hidden elements will still be present and visible to screen readers. |
| Optional
Sets whether or not the element is in an invalid state. This is a display-only prop, and will not prevent form submission. |
| Optional
Text that describes the control. Will be both visible and clickable. |
| Optional
An onChange-alike event that fires only when the change results in a valid date. Identical behavior to |
| Optional
The size of the component. |
| Optional
Controls the input’s text. When you pass this prop, you must also pass an |
Size
A DateField at each size will match a TextField at that same size. However, you can’t make a date input wider in the same way that you can 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" />
Error
You can provide an error message to indicate a problem with the date.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2099-02-31" invalid error="Invalid birthday" />
Disabled
Disable a DateField if the user shouldn’t modify it.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" disabled />
Hide elements
You can visually hide elements of the DateField component, such as the label or description, while maintaining accessibility for screen readers.
<DateField label="Date of birth" description="Enter your birthday" defaultValue="2011-09-01" hiddenElements={['description', 'label']} />
Events
The onChange prop works similarly to a native <input type="date" /> HTML element. It only returns a value when it’s a valid date. This means that the onChange handler won’t be called on every keystroke, and a DateField can’t be a controlled input.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log(e.target.value); }} />
Event props (beginning with on) besides onChange fire independently for each of the three sections of the DateField component: year, month, and day.
<DateField label="Date of birth" description="Enter your birthday" onChange={(e) => { console.log('change', e); }} />