Skip to content
Home

Date

Info
Demos
Properties
Events

Demos

Label and value

Code Editor
<Field.Date
  label="Label text"
  value="2023-01-16"
  onChange={(value) => console.log('onChange', value)}
/>

With a horizontal layout

Code Editor
<Field.Date
  label="Label with a long text that will wrap"
  layout="horizontal"
  layoutOptions={{
    width: 'medium', // can be a rem value
  }}
/>

Date range

Code Editor
<Field.Date label="Label text" value="2023-01-16|2023-04-01" range />

Automatically close picker

The calendar will be prevented from automatically closing when the submit or cancel buttons are visible, to ensure that the user is actually able to interact with them after date selection.

To enable the picker to close automatically, you have to set showCancelButton to false, to override the default behavior.

Code Editor
<Field.Date label="Automatically Close" showCancelButton={false} />

With help

Code Editor
<Field.Date
  label="Label text"
  value="2023-01-16"
  help={{
    title: 'Help is available',
    content:
      'Kindness and helping others will return to you when you least expect it, and maybe when you need it.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

Code Editor
<Field.Date
  label="Label text"
  value="2023-01-16"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error

This is what is wrong...

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new Error('This is what is wrong...')}
/>

Date limit validation

The Date field will automatically display an error message if the selected date is before minDate or after maxDate.

Code Editor
<Field.Date
  value="2024-12-31|2025-02-01"
  minDate="2025-01-01"
  maxDate="2025-01-31"
  range
/>

Validation - Required

Code Editor
<Field.Date
  label="Label text"
  value="2023-01-16"
  onChange={(value) => console.log('onChange', value)}
  required
/>

Extend validation with custom validation function

You can extend the existing validation (dateValidator) with your own validation function.

Code Editor
const myDateValidator = (value: string) => {
  if (value === '2025-01-01') {
    return new Error('My custom message')
  }
  if (value === '2025-01-03') {
    return [
      new Error('My custom message 1'),
      new Error('My custom message 2'),
    ]
  }
}
const myOnBlurValidator = (value: string, { validators }) => {
  const { dateValidator } = validators
  return [myDateValidator, dateValidator]
}
render(
  <Field.Date
    value="2025-01-01"
    minDate="2024-12-31"
    maxDate="2025-01-31"
    onBlurValidator={myOnBlurValidator}
  />,
)