DateField
The <DateField> allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment.
The <DateField> segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
Import
import { DateField } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | The label text. |
description | ReactNode | none | A helpful text. |
errorMessage | ReactNode | none | An error message. |
error | boolean | false | If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`. |
defaultValue | DateValue | none | The default value of the date field. |
value | DateValue | none | The value of the date field. |
disabled | boolean | false | If `true`, the date field is disabled. |
required | boolean | false | If `true`, the date field is required. |
readOnly | boolean | false | If `true`, the date field is readOnly. |
onChange | function | none | A callback function that is called with the date field's current value changes. |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
Examples
Simple DateField
This example shows a regular <DateField> without any special props.
Disabled DateField
You can disable the <DateField> so that the user can't interact with it anymore.
Required DateField
If you want a <DateField> to be required, you just have to add the property required. With that the small required icon appears next to the label.
DateField With an Error
This example shows how to use the error with the errorMessage.