DateEdit component

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

Being built around native 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" />


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
Placeholder Sets the placeholder for the empty date. 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