All components (204)

Date and time

Dates and time · DateTimePicker · .amset-datetime

What it is and when to use it

Date and time together in a single field: the DatePicker calendar and the TimeField segments inside a named group. The value is one string, 2026-10-15T09:30, which is what an <input type="datetime-local">, the server and new Date understand.

When to use it

An appointment, a due date, the start of a shift: anything that happens on a day and at a time.
onChange only fires with the full date and the full time: half a date is not a value.
min and max (same format) limit the days; isDateUnavailable switches off individual days (holidays, fully booked days).
With name it travels in a native form as a single field.

When not to

Just the day: DatePicker. Just the time: TimeField. A slot inside an agenda: SlotPicker.
A period (from-to): DateRangePicker.

Keyboard: that of each part: segments are typed into and moved with the arrow keys, the calendar opens with its button. A fieldset group with its legend ties them together for the screen reader.

Accessibility: the group name is the label; "Date" and "Time" name each part. Leaving the group with only one of the two filled in raises a role="alert" saying what is missing. The server error (error) takes precedence over the one the field computes.

Fine styling: --amset-datetime-gap (gap between date and time), plus the field variables (--amset-field-*) and the calendar ones (--amset-calendar-*).

What it looks like

Store pickup

Date

11202026

Time

0530PM

Monday to Saturday

Pickup chosen: 2026-11-20, 17:30.

Delivery (from today)

Date

mmddyyyy

Time

––––AM

<DateTimePicker label="Store pickup" value={valor} onChange={setValor} hint="Monday to Saturday" />
<DateTimePicker label="Delivery (from today)" value={vacio} onChange={setVacio} min="2026-10-20T00:00" required />

Props

Import it with import { DateTimePicker } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Required: names the group of the two fields.
`className`	`string`	Merged with the library classes; it does not replace them.
`disabled`	`boolean`	—
`error`	`string`	Error from outside (from the server). It takes precedence over the one the field calculates.
`firstDayOfWeek`	`FirstDayOfWeek`	—
`granularity`	`"minute" \| "second"`	How far the time goes: `minute` (default) or `second`.
`hint`	`string`	—
`initialValue`	`string \| null`	The value at start, not controlled from outside.
`isDateUnavailable`	`(date: PlainDate) => boolean`	—
`max`	`string`	The latest accepted value, in the same format. Only the day is checked.
`min`	`string`	The earliest accepted value, in the same format. Only the day is checked.
`name`	`string`	So that it travels in a native form, as a single field.
`onChange`	`(value: string) => void`	Notifies only with a complete date AND time: `YYYY-MM-DDTHH:MM` (with `:SS` if `granularity` is `second`).
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`value`	`string \| null`	The date and time together, `YYYY-MM-DDTHH:MM`, controlled from outside. `null` means empty.
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-datetime-gap`	`var(--amset-space-3)`

How to change it

.amset-datetime {
  --amset-datetime-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: