Date component


A native date field example with type="date".

<DateEdit TValue="DateTime?" />


With bind attribute

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

<DateEdit TValue="DateTime?" @bind-Date="@selectedDate" />

    DateTime? selectedDate;

With event

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