Date

import Date from 'frui/fields/Date';

Copy

Props

Dates accepts all props of a standard HTML Input element. See Moz for standard input attributes.

Name	Type	Required	Notes
className	string	No	Standard HTML class names
defaultValue	string\|number\|Date	No	Default value (Uncontrolled)
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
onChange	Function	No	Event handler when value has changed
onUpdate	Function	No	Update event handler
passRef	LegacyRef	No	Passes ref to html input
style	CSS Object	No	Standard CSS object
value	string\|number\|Date	No	Default value (Controlled)

Basics

Date fields use the default `<input type="date" />` element, but normalizes values to ISO strings using toISOString(). onUpdate is like onChange except the value is passed instead of the change event.

<DateField defaultValue={'2024-02-03 12:00:00'} />
<DateField defaultValue={new Date()} />
<DateField defaultValue={(new Date()).getTime()} />

Copy

When using the native Date object, change import to import DateField from 'frui/fields/Date' or whatever name you like.

Events

onUpdate is like onChange except the value is passed instead of the change event.

<Date onUpdate={value => alert(value)} />

Copy

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

Name	Type	Sample
event	Event Object	see: Change Event

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	string	`2024-12-01T00:00:00.000Z`

Errors

You can pass the error prop to highlight the input field red.

<Date error={string|true} value="Invalid Date." />

Copy

Custom Styles

You can add your own custom class to date or use the frui-field-time CSS class.

Currency

Datetime