Date Picker

Examples

Default Value

Use the defaultValue prop with parseDate to set the initial date value.

Default View

Use the defaultView prop to set which view (day, month, or year) the calendar opens to initially.

Range

Use the selectionMode="range" prop to allow user to pick dates range.

Multiple

Use the selectionMode="multiple" prop to allow selecting multiple dates. This example also shows how to display selected dates as removable tags.

Multiple Months

Use the numOfMonths prop to to display multiple months side by side.

Presets

Use the DatePickerPresetTrigger component to add quick-select preset options like "Last 7 days" or "This month".

Min and Max

Use the min and max props with parseDate to restrict the selectable date range. Dates outside this range will be disabled.

Disabled

Use the disabled prop to disable the date picker.