Date Input
Keyboard-driven segmented date field with optional calendar picker. Each date part (month, day, year) is individually focusable and editable.
Default
A basic date input with calendar picker button.
Value: None
With Initial Value
Pre-populated with a specific date.
Value: Sunday, March 25, 1990
Without Picker Button
Keyboard-only input, no calendar popover.
Value: None
With Date Constraints
Limits selectable dates to the next 6 months in the calendar picker.
Value: None
Custom Culture (French)
Uses dd/MM/yyyy format from fr-FR culture.
Value: None
Disabled State
Input is non-interactive when disabled.
Placeholder
Shows placeholder text when the value is empty and the input is not focused. Clicking the placeholder or tabbing in reveals the segments.
Value: None
Validation
Integrated with Blazor EditForm and DataAnnotations.
Keyboard Support
All keyboard interactions supported by the date input.
| Key | Behavior |
|---|---|
| ↑ | Increments the focused segment. If any segment is empty, all unset segments are first filled from today's date, then the focused segment is incremented. |
| ↓ | Decrements the focused segment with the same auto-fill behavior. Wraps at boundary. |
| ← | Moves focus to the previous segment. |
| → | Moves focus to the next segment. |
| 0–9 | Types a digit into the active segment. Auto-advances to the next segment when filled. |
| C | Sets all segments to today's date. Does not fire when combined with Ctrl or ⌘ (copy shortcut). |
| Backspace / Del | Clears the active segment value. |
| Tab / Shift+Tab | Navigates between segments using native browser focus. |
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | DateOnly? | null | The selected date. Supports two-way binding via @bind-Value. |
| ValueChanged | EventCallback<DateOnly?> | — | Invoked when the value changes. |
| Culture | CultureInfo? | CurrentCulture | Culture for date format and localization. |
| Disabled | bool | false | When true, the input is non-interactive. |
| Required | bool | false | Marks the input as required. |
| ShowPickerButton | bool | true | Shows or hides the calendar picker button. |
| MinDate | DateOnly? | null | Earliest selectable date in the calendar. |
| MaxDate | DateOnly? | null | Latest selectable date in the calendar. |
| IsDateDisabled | Func<DateOnly, bool>? | null | Function to disable specific dates in the calendar. |
| CaptionLayout | CalendarCaptionLayout | Label | Calendar caption layout (Label or Dropdown). |
| Id | string? | null | HTML id attribute for the container. |
| Name | string? | null | Name for the hidden form input. |
| Class | string? | null | Additional CSS classes for the container. |
| AriaLabel | string? | "Date" | ARIA label for the group container. |
| AriaDescribedBy | string? | null | ARIA describedby for the group container. |
| AriaInvalid | bool? | null | When true, applies destructive border styling. |
| Placeholder | string? | null | Text shown when the value is empty and the input is not focused. |