Blazorise DateEdit component

DateEdit 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 DateEdit 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.

Basic example

<DateEdit TValue="DateTime?" />


Two-way binding

By using bind-* attribute the selected date will be automatically assigned to the member variable.
<DateEdit TValue="DateTime?" @bind-Date="@selectedDate" />
    DateTime? selectedDate;

Manual event binding

When using the event DateChanged, you also must define the Date value attribute.
<DateEdit TValue="DateTime?" Date="@selectedDate" DateChanged="@OnDateChanged" />
    DateTime? selectedDate;

    void OnDateChanged( DateTime? date )
        selectedDate = date;


DateEdit component also support entering a time part. To enable it just set InputMode parameter.
<DateEdit 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.

    <Button Color="Color.Primary" Clicked="@(()=>dateEditRef.ShowPicker())">
        Show Picker
    <DateEdit @ref="@dateEditRef" TValue="DateTime" />
@code {
    DateEdit<DateTime> dateEditRef;


Name Description
ShowPicker() Show a browser picker for the date input.



Name Description Type Default
Date Gets or sets the input date value. TValue default
DateChanged Occurs when the date has changed. EventCallback<TValue>
InputMode Hints at the type of data that might be entered by the user while editing the element or its contents. DateInputMode Date
Min The earliest date to accept. DateTimeOffset? null
Max The latest date to accept. DateTimeOffset? null
Pattern The pattern attribute specifies a regular expression that the input element’s value is checked against on form submission. string null
Step The step attribute specifies the legal day intervals to choose from when the user opens the calendar in a date field. int 1
On this page