Blazor: Two way data binding workaround with date input

Blazor is an experimental framework that implements many essential elements of a C#/HTML/CSS framework. See https://blazor.net/index.html for details.

Two way data binding is available for many elements but two notable missing elements are the input elements radio buttons and  dates as of Blazor 0.5.1. The radio button issue has a clean workaround by jsakamoto in https://dev.to/j_sakamoto/workaround-how-to-two-way-data-binding-of-radio-button-input-with-blazor-spa-v050-31fd. This post offers a workaround for dates.

Start with a definition of the date field in your cshtml file like:

<input type="date" onchange="@SelectedDateChanged" id="scheduleDate"/>

In the code-behind file define SelectedDateChanged and OnAfterRenderAsync as

        protected DateTime pSelectedDate { get; set; }
        protected async void SelectedDateChanged()
        {
            string selectedDateAsString = await JSRuntime.Current.InvokeAsync("customizationJsFunctions.getSelectedDate");
            try
            {
                pSelectedDate = Convert.ToDateTime(selectedDateAsString);
            }
            catch
            {
                pSelectedDate = DateTime.Now;
            }
            StateHasChanged();
        }


        protected override async Task OnAfterRenderAsync()
        { 
            if (pSelectedDate != DateTime.MinValue)
            {
                string selectedDateAsString = pSelectedDate.ToString("yyyy-MM-dd");

                await JSRuntime.Current.InvokeAsync("customizationJsFunctions.setSelectedDate", selectedDateAsString);
            }
        }

As you can see there are two calls to JSInterop. Define the following script:

    <script>
        window.customizationJsFunctions = {
            getSelectedDate: function () {
                return document.getElementById("scheduleDate").value;
            },
            setSelectedDate: function (selectedDate) {
                document.getElementById("scheduleDate").value = selectedDate;
                return "OK";
            }
        };
    </script>

And with this you have the equivalent functionality of data binding with the input date element.