Blazor Date Field Binding

Two-way binding is having a bidirectional data flow, i.e., passing the value from the property to the UI and then from the view (UI) to the property. Blazor provides support for two-way binding using the bind attribute.

Syntax for creating two-way binding property:

@bind-{Parameter_name}={Variable_name}

Note: Must enclose “InputDate” field in a “EditForm”.

<EditForm Model="@_test">
    <InputDate @bind-Value="_test.DateValue" />
</EditForm>

<br />

<p>Selected Date: @_test.DateValue.ToLongDateString()</p>

@code {
    
    public class TestClass
    {
        public DateTime DateValue { get; set; }
    }

    private TestClass _test = new TestClass();
}

Sources:

https://www.syncfusion.com/faq/blazor/data-binding/how-to-make-two-way-binding-with-input-date-value

https://www.pragimtech.com/blog/blazor/blazor-datepicker/