Date Picker

Forms · Calendar, DatePicker

Date field that opens a month calendar in a Popover. range picks a from–to span and adds presets.

Props: label, value/defaultValue (Date, or {from, to} with range), onChange, range, presets (false to hide), min, max, today, placeholder, hint, error, required. Calendar is the bare month grid for inline use.

Weeks start on Monday; dates read DD.MM.YYYY. Today has a dot under the number.
A range closes after the second click; a single date closes after one.
Presets cover the ranges people actually pick (7, 30, 90 days, this year); keep them to four.

PreviewCode

Due date

Report rangePresets on the left

Props

Calendar

Prop	Type	Notes
`range?`	`boolean`
`value?`	`Date \| DateRange \| null`
`onChange?`	`(v: Date \| DateRange) => void`
`today?`	`Date`
`min?`	`Date`
`max?`	`Date`
`month?`	`Date`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

DatePicker

Prop	Type	Notes
`label?`	`string`
`range?`	`boolean`
`value?`	`Date \| DateRange \| null`
`defaultValue?`	`Date \| DateRange`
`onChange?`	`(v: Date \| DateRange \| null) => void`
`presets?`	`boolean`
`min?`	`Date`
`max?`	`Date`
`today?`	`Date`
`placeholder?`	`string`
`hint?`	`string`
`error?`	`string`
`required?`	`boolean`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.