Calendar, Asgard Docs

Pickers

Pick a date or a range.

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

Date fields and inline pickers
Booking / availability ranges
Half-day leave selection
Filtering by date

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