Skip to content
Home

Date

Info
Demos
Properties
Events

Description

Field.Date is a wrapper component for the input of strings, with user experience tailored for date values.

import { Field } from '@dnb/eufemia/extensions/forms'
render(<Field.Date />)

There is a corresponding Value.Date component.

Demos

Empty

Dato

Code Editor
<Field.Date onChange={(value) => console.log('onChange', value)} />

Placeholder

Dato

Code Editor
<Field.Date

  placeholder="Enter a date"

  onChange={(value) => console.log('onChange', value)}

/>

Label

Label text

Code Editor
<Field.Date

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

Label and value

Label text

Code Editor
<Field.Date

  value="2023-01-16"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

/>

With help

Label text

Code Editor
<Field.Date

  value="2023-01-16"

  label="Label text"

  help={{

    title: 'Help is available',

    contents:

      '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

Label text

Code Editor
<Field.Date

  value="2023-01-16"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  disabled

/>

Error

This is what is wrong...
Label text

Code Editor
<Field.Date

  value="2023-01-16"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  error={new FormError('This is what is wrong...')}

/>

Validation - Required

Label text

Code Editor
<Field.Date

  value="2023-01-16"

  label="Label text"

  onChange={(value) => console.log('onChange', value)}

  required

/>