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?" />

Binding

Two-way binding

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

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

@code{
    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" />

@code{
    DateTime? selectedDate;

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

DateTime

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.

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

@code {
    DateEdit<DateTime> dateEditRef;
}