Microsoft.AspNetCore.Components.Forms.InputDate requires a cascading parameter of type EditContext

Question

I'm developing an ASP.NET 5.0 blazor web assembly app. I need to have a datepicker in Dashboard Screen to select a date to display details.

Here is my code:

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")">

I need to trigger an API call on change of date. So I tried to add @onchange to the above code as shown below.

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")"
        @onchange="OnStaffSalePeriodChange">

But this gives new error as shown below:

The attribute 'onchange' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'onchange' is used by the '@bind' directive attribute.

So I tried to replace the above input element with <InputDate> as shown below,

<InputDate class="input is-small"
        ValueExpression="() => StaffSaleDetailsPeriod"
        Value="StaffSaleDetailsPeriod"
        ValueChanged="(DateTime staffSalesPeriod) => OnStaffSalePeriodChange()"
        max="@DateTime.Now.ToString("yyyy-MM")"/>

This gives a runtime error as shown below:

Microsoft.AspNetCore.Components.Forms.InputDate1[System.DateTime] requires a cascading parameter of type EditContext. For example, you can use Microsoft.AspNetCore.Components.Forms.InputDate1[[System.DateTime, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]] inside an EditForm

What is missing or this <InputDate> cannot be used with EditForm? Is there any workaround?

Answer 1

<input class="input" type="month" id="staffPicker" name="staffPicker"
        aria-label="Staff Sales Detail Period"
        @bind="StaffSaleDetailsPeriod"
        max="@DateTime.Now.ToString("yyyy-MM")"
        @onchange="OnStaffSalePeriodChange">

When you use the @bind compiler directive, the compiler creates , behind the scenes, some code, the result of which is as if you've done something like this:

<input class="input" type="month" id="staffPicker" name="staffPicker"
            aria-label="Staff Sales Detail Period"
            value="StaffSaleDetailsPeriod"
            max="@DateTime.Now.ToString("yyyy-MM")"
            @onchange="@((args) => OnStaffSalePeriodChange=args.Value.ToString())">

Thus if you use @bind, you can't use the @onchange directive, but you can do what I did above.

As for the second issue: The InputDate component must be embedded within an EditForm whose Model attribute or EditContext are having the necessary value