Calendar
A date field component that allows users to enter and edit a date
Divergence from Blok
Hand-rolled Calendar, not a react-day-picker wrapper. Blok's Calendar is a thin wrapper around react-day-picker exposing captionLayout, formatters, buttonVariant, showOutsideDays, and a components override prop. We implement the calendar from scratch with Blazor-native parameters: Value, RangeStart/RangeEnd, MinDate/MaxDate, YearRangeStart, and NumberOfMonths. There is no react-day-picker compatibility layer — Blok-style props will not work. Range selection, min/max bounds, and multi-month panels are supported out of the box.
Examples
Default
With min/max date constraints
Date Range Selection
Two Months with Range
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Calendar | Month-grid date picker. Supports single-date selection via Value/ValueChanged or range selection via RangeStart/RangeEnd. Range mode is activated when either range *Changed callback is wired up. |
Calendar
Month-grid date picker. Supports single-date selection via Value/ValueChanged or range selection via RangeStart/RangeEnd. Range mode is activated when either range *Changed callback is wired up.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | DateTime? | Single-date selection. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<DateTime?> | Fires when the selected date changes. Supports @bind-Value. | |
| Range | bool? | Override the range-mode auto detection. | |
| RangeStart | DateTime? | Start of the selected range. Wiring RangeStartChanged (or using @bind-RangeStart) switches the calendar into range-selection mode. | |
| RangeStartChanged | EventCallback<DateTime?> | Fires when the range start changes. Supports @bind-RangeStart. | |
| RangeEnd | DateTime? | End of the selected range. Set alongside RangeStart for range-mode. | |
| RangeEndChanged | EventCallback<DateTime?> | Fires when the range end changes. Supports @bind-RangeEnd. | |
| MinDate | DateTime? | Minimum selectable date. Dates before this render disabled. | |
| MaxDate | DateTime? | Maximum selectable date. Dates after this render disabled. | |
| YearRangeStart | int | First year offered in the year dropdown. Default: current year − 10. Overridden by MinDate when present. | |
| YearRangeEnd | int | Last year offered in the year dropdown. Default: current year + 10. Overridden by MaxDate when present. | |
| NumberOfMonths | int | How many month panels to show side-by-side. Default: 1. Use 2 for a typical range-picker layout. | |
| ClassName | string? | Extra CSS classes appended to the outer card. |