DatePicker

Examples

Default value

Date

Helper Text

Date

This is a helper text

Min and Max values

Date

Date out of bounds

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.

Date

This date is critical

Format

You can set formmating of date based on Intl.DateFormatOptions using the formatOptions property.

Date

I18n

The date-picker has default translations. Wrap your app with the I18nProvider to configure the locale.

Date

Placeholder

Each segment placeholder is defined individually. Placeholders don't have default translation.

Date

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

1. Combine with Dropdowns or other components if you need more input from the user such as choosing a timezone.
2. Combine with the TimePicker component for specifying a time when choosing a date.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• Examples
  • Default value
  • Helper Text
  • Min and Max values
  • Tone of voice
  • Format
  • I18n
  • Placeholder
• TODOs