DatePicker

A date picker input with calendar popup

Interactive-mode

Installation instructions

DatePicker's calendar opens through the shared Popover infrastructure, so the same setup applies:

Register the BlazorUI services in Program.cs:
```
builder.Services.AddSitecoreBlokUI();
```
Place a single <Popovers /> container in your root layout:
```
<Popovers @rendermode="InteractiveServer" />
```

Divergence from Blok

Single unified component covering both single-date and range-date modes. Blok exports DatePickerSimple and DatePickerWithRange as two separate components with dateFormat, locale, rangeSeparator, and calendarProps. Ours is one <DatePicker>: bind Value for single-date mode, or bind RangeStart + RangeEnd to switch it into range mode. Configure display with Format (string). The multi-month calendar popup comes for free from our Calendar component.

Examples

Default

With Custom Placeholder

Date Range

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
DatePicker	Button-styled input that opens a `Calendar` popover. Acts as a single-date picker when `Value`/`ValueChanged` are bound, or as a range picker when `RangeStart`/`RangeEnd` are bound.

DatePicker

Button-styled input that opens a Calendar popover. Acts as a single-date picker when Value/ValueChanged are bound, or as a range picker when RangeStart/RangeEnd are bound.

Property	Type	Description
Value	DateTime?	Selected date in single-date mode. Supports two-way binding via `@bind-Value`.
ValueChanged	EventCallback<DateTime?>	Fires when the user picks a date in single-date mode.
Range	bool?	Override the range-mode auto detection.
RangeStart	DateTime?	Start date in range mode. Supports two-way binding via `@bind-RangeStart`.
RangeStartChanged	EventCallback<DateTime?>	Fires when the range start changes. Binding it (or `RangeEndChanged`) switches the picker into range mode.
RangeEnd	DateTime?	End date in range mode. Supports two-way binding via `@bind-RangeEnd`.
RangeEndChanged	EventCallback<DateTime?>	Fires when the range end changes. Closes the popup when a non-null end date is picked.
MinDate	DateTime?	Earliest selectable date. Passed through to the inner `Calendar`.
MaxDate	DateTime?	Latest selectable date. Passed through to the inner `Calendar`.
Placeholder	string	Button text shown when no date is selected. Default: `"Pick a date"`.
Format	string	`DateTime.ToString` format used for the button label. Default: `"d MMM yyyy"`.
NumberOfMonths	int	Number of months shown side-by-side in the calendar popup. Default: `1`. Use `2` for a typical range picker.
Disabled	bool	When true, the button is non-interactive. Default: `false`.
AriaLabels	DatePickerAriaLabels?	Optional ARIA overrides for chrome outside the calendar grid. Set `PopoverTrigger` to customise the trigger button's `aria-label`; when omitted the `Placeholder` is used.
ClassName	string?	Extra CSS classes appended to the trigger button.