DateTime input, Asgard Docs

Pickers

A field that opens a date/time picker.

A comprehensive suite of date and time components: Calendar, TimePicker, and DateTimeInput.

Key features:

Selection modes: single, range, multiple
allowHalfDay for hotel-style check-in/check-out booking
minDate/maxDate constraints and showWeekNumbers
DateTimeInput combines calendar popup with text input

Loading preview…

When to use it

Form fields for dates and times
Date and datetime ranges
Compact scheduling inputs
Birthday / deadline fields with constraints

Properties

Prop	Type	Default	Description
`value`	`Date \| Date[]`	—	(Calendar) The currently selected date or array of dates, depending on the selection mode.
`onChange`	`(value: Date \| Date[] \| null) => void`	—	(Calendar) Callback fired when the selected date(s) change. The handler receives the new value directly, NOT a DOM event.
`selectionMode`	`'single' \| 'range' \| 'multiple'`	`'single'`	(Calendar) Controls whether the user can select a single date, a date range, or multiple individual dates.
`size`	`'small' \| 'normal' \| 'large'`	`'normal'`	(Calendar) Controls the visual size of the calendar grid.
`minDate`	`Date`	—	(Calendar) The earliest selectable date. Dates before this are disabled.
`maxDate`	`Date`	—	(Calendar) The latest selectable date. Dates after this are disabled.
`allowHalfDay`	`boolean`	`false`	(Calendar) When true, enables half-day selection for hotel-style check-in/check-out booking.
`showWeekNumbers`	`boolean`	`false`	(Calendar) When true, displays ISO week numbers alongside each row.

Notes

Calendar supports half-day selection for hotel-style booking, where check-in and check-out can land on the same date with AM/PM distinction.
TimePicker handles hours and minutes with optional seconds display.
DateTimeInput combines a calendar popup with a text input for a compact date-time selection experience.

Presets