DatePicker
Examples
Default value
Loading...
Helper Text
Loading...
Min and Max values
Loading...
Tone of voice
Use the tone prop to define the tone of voice, which is either neutral or critical. It is up to you to define what triggers it. Additionally, you can add a criticalText to be displayed whether critical.
Loading...
Format
You can set formmating of date based on Intl.DateFormatOptions using the formatOptions property.
Loading...
I18n
The date-picker has default translations. Wrap your app with the I18nProvider to configure the locale.
Loading...
Placeholder
Each segment placeholder is defined individually. Placeholders don't have default translation.
Loading...
TODOs
Features and fixes scheduled for this component:
- Support typing.
- Support placeholder localization.
- Desing: Adjust calendar cels spacing
- Design: Add hover and focus states
- Design: Bleeding for internal buttons
Usage
import {
experimental_DatePickerField as DatePickerField,
experimental_DatePickerCalendar as DatePickerCalendar,
experimental_useDatePickerState as useDatePickerState,
} from '@vtex/admin-ui'
function Example() {
const state = useDatePickerState()
return <DatePicker label="Date" state={state} />
}
Props
DatePickerField
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| state | DatePickerState | Required state | ✅ | - |
| label | string | Required label | ✅ | - |
| csx | StyleObject | Custom styles | 🚫 | {} |
| helperText | string | Helper text | 🚫 | - |
| criticalText | string | Critical text | 🚫 | - |
DatePickerCalendar
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| state | DatePickerState | Required state | ✅ | - |
| csx | StyleObject | Custom styles | 🚫 | {} |
Do’s
- Combine with Dropdowns or other components if you need more input from the user such as choosing a timezone.
- Combine with the TimePicker component for specifying a time when choosing a date.
👉 For UX Writing guidelines, access https://uxwriting.vtex.com