Skip to content
Home

Field.Date

Info
Demos
Properties
Events

Demos

Label and value

16012023

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

With a horizontal layout

ddmmåååå

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

Date range

16012023
01042023

<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.

ddmmåååå

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

With help

16012023

<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

16012023

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

Error

This is what is wrong...
16012023

<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.

31122024
01022025

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

Validation - Required

ddmmåååå

<Field.Date
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
  validateInitially
/>

Extend validation with custom validation function

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

01012025

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'),
    ]
  }
}

// Combine the shared validator with the custom date rules.
const myOnBlurValidator: DateValidator = (
  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}
  />
)