Datetime

import Datetime from 'frui/fields/Datetime';

Copy

Props

Datetime 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

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

<Datetime defaultValue={new Date().toISOString()} />
<Datetime defaultValue={new Date()} />
<Datetime defaultValue={(new Date()).getTime()} />

Copy

Events

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

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

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

Copy

Custom Styles

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

Date

Fieldset