Date Picker
Calendar dropdown for selecting single dates or date ranges.
Single date
Click the trigger to open the calendar
Month navigation, manual input, and a 'Today' shortcut.
razor
<DatePickerDropdown Mode="Single"
SelectedDate="@singleDate"
SelectedDateChanged="@((d) => { singleDate = d; })"
Placeholder="Pick a date"
OnApply="@(() => singleApplied = true)"
OnCancel="@(() => singleApplied = false)" />
@code {
private DateOnly? singleDate;
private bool singleApplied;
}Pre-selected
Initialized with today's date
razor
<DatePickerDropdown Mode="Single"
SelectedDate="@date"
SelectedDateChanged="@((d) => { date = d; })" />
@code {
private DateOnly? date = DateOnly.FromDateTime(DateTime.Today);
}Dual date range
Two side-by-side calendars
Preset ranges, range highlighting, start/end inputs.
razor
<DatePickerDropdown Mode="Dual"
StartDate="@rangeStart"
StartDateChanged="@((d) => { rangeStart = d; })"
EndDate="@rangeEnd"
EndDateChanged="@((d) => { rangeEnd = d; })"
Placeholder="Select date range"
OnApply="@(() => rangeApplied = true)" />
@code {
private DateOnly? rangeStart;
private DateOnly? rangeEnd;
private bool rangeApplied;
}Dual range — pre-selected
Initialized with the current week
razor
@* Pre-seed a range — e.g. the current week *@
protected override void OnInitialized()
{
var today = DateOnly.FromDateTime(DateTime.Today);
int diff = ((int)today.DayOfWeek + 6) % 7;
preRangeStart = today.AddDays(-diff);
preRangeEnd = preRangeStart.Value.AddDays(6);
}
<DatePickerDropdown Mode="Dual"
StartDate="@preRangeStart"
EndDate="@preRangeEnd" />