Input Date Picker
A text input with an integrated calendar dropdown. Supports typed input and click-to-pick.
Default (MM/DD/YYYY)
Type a date or click the calendar icon
razor
<InputDatePicker Label="Date of birth"
Placeholder="MM/DD/YYYY"
@bind-SelectedDate="defaultDate"
Hint="Enter your date of birth" />
@code {
private DateOnly? defaultDate;
}Pre-selected
Calendar opens to the pre-set month
razor
<InputDatePicker Label="Start date"
@bind-SelectedDate="preselectedDate" />
@code {
private DateOnly? preselectedDate = new DateOnly(2025, 3, 15);
}DD/MM/YYYY format
European format
razor
<InputDatePicker Label="Appointment date"
DateFormat="dd/MM/yyyy"
@bind-SelectedDate="euroDate" />ISO format (YYYY-MM-DD)
Common in databases and APIs
razor
<InputDatePicker Label="Effective date"
DateFormat="yyyy-MM-dd"
@bind-SelectedDate="isoDate" />Required with error
Required asterisk + error message
razor
<InputDatePicker Label="Expiry date"
Required="true"
HasError="true"
ErrorMessage="This field is required"
@bind-SelectedDate="errorDate" />Disabled
Input and calendar icon locked
razor
<InputDatePicker Label="Locked date"
Disabled="true"
SelectedDate="@(new DateOnly(2025, 6, 15))" />Side by side range
Two pickers for start/end scenarios
razor
<div style="display: flex; gap: 1rem;">
<InputDatePicker Label="From" @bind-SelectedDate="rangeStart" />
<InputDatePicker Label="To" @bind-SelectedDate="rangeEnd" />
</div>