Blazorise DateInput component

DateInput is an input field that allows the user to enter a date by typing or by selecting from a calendar overlay.

A native date <input> component built around the <input type="date">.

Being built around native <input type="date"> input element, the DateInput component comes with a few limitations that you must be aware of. First and foremost, the input display format is fully controlled by the browser and the system locale. This means that for you to change the input format you would need to change the browser settings.

Examples

Basic example

<DateInput TValue="DateTime?" />

Binding

Two-way binding

By using bind-* attribute the selected date will be automatically assigned to the member variable.

<DateInput TValue="DateTime?" @bind-Value="@selectedDate" />

@code{
    DateTime? selectedDate;
}

Manual event binding

When using the event ValueChanged, you also must define the Value value attribute.

<DateInput TValue="DateTime?" Value="@selectedDate" ValueChanged="@OnDateChanged" />

@code{
    DateTime? selectedDate;

    void OnDateChanged( DateTime? date )
    {
        selectedDate = date;
    }
}

DateTime

DateInput component also support entering a time part. To enable it just set InputMode parameter.

<DateInput TValue="DateTime?" InputMode="DateInputMode.DateTime" />

Show Picker

If you want to show the default picker that comes with the date input element you can make it by using the ShowPicker() function.

Note: Keep in mind that not all browser will support the ShowPicker() function.

<Field>
    <Button Color="Color.Primary" Clicked="@(() => dateInputRef.ShowPicker())">
        Show Picker
    </Button>
</Field>
<Field>
    <DateInput @ref="@dateInputRef" TValue="DateTime" />
</Field>

@code {
    DateInput<DateTime> dateInputRef;
}

Best Practices

Clear Format

Pair the input with a visible label and communicate the expected date format through persistent help text or a format-aware placeholder. Use a nullable value when an empty date is valid, and distinguish that empty state from a default date in application logic.

Apply Meaningful Constraints

Minimum and maximum dates should reflect the actual business rule, which must also be validated when the form is processed. When browsing dates is easier than typing them, particularly for nearby appointments or date ranges, use a DatePicker.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<DateInput />