Date Picker
Date selection with a calendar in a popover. Pick a single date or a date range with full keyboard navigation.
Default
A basic date picker with calendar icon.
Selected: None
With Dropdown Icon
Date picker with chevron-down icon on the right, no calendar icon on the left.
Selected: None
Date Range Picker
Select a date range with start and end dates displayed side-by-side.
From: None
To: None
With Date Constraints
Limit selection to a specific date range.
Selected: None
Disable Weekends
Disable specific dates with a custom function.
Selected: None
Custom Format
Display date with a custom format string.
Selected: None
Dropdown Mode
Use dropdown selects for quick month and year navigation.
Selected: None
In a Form
DatePicker integrated with form fields.
Selected: None
Travel Dates
Date range picker with custom labels for travel booking.
Check-in: None
Check-out: None
Date and Time Picker
Combine date and time selection in a single input scenario.
No appointment scheduled
Disabled State
A disabled date picker.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| SelectedDate | DateOnly? | — | The selected date. Supports two-way binding with @bind-SelectedDate. |
| Placeholder | string? | — | Text shown when no date is selected. |
| MinDate | DateOnly? | — | The earliest selectable date. |
| MaxDate | DateOnly? | — | The latest selectable date. |
| IsDateDisabled | Func<DateOnly, bool>? | — | Function to determine whether a specific date should be disabled. |
| DateFormat | string? | — | Format string for displaying the selected date. |
| ShowIcon | bool | true | Show calendar icon on the left of the trigger button. |
| ShowDropdownIcon | bool | false | Show chevron-down icon on the right of the trigger button. |
| CaptionLayout | CalendarCaptionLayout | Label | Calendar header style. Options: Label, Dropdown. |
| Disabled | bool | false | When true, the picker cannot be opened. |