c# - Can I update a DateTime via a Blazor Component

Question

I've created a re-useable custom Blazor component to provide a Day+Month selector (no year).

I'm passing in a DateTime variable and updating this via the component - well, I do a new DateTime() as the DateTime is immutable. The original variable doesn't get updated through - is this because I do a new DateTime()?

Component

    <div class="form-field">
    <label class="col-form-label">@SelectName</label>
    <div class="row">
        <div class="col">
            <InputSelect ValueExpression="@(()=>selectedDay)"
                         Value="@selectedDay"
                         ValueChanged="@((int value) => OnDayValueChanged(value))" class="form-control">
                @for (int day = 1; day <= numberOfDaysInSelectedMonth; day++)
                {
                    <option value="@day" selected="@(selectedDay==day?true:false)">@day</option>
                }
            </InputSelect>
        </div>
        <div class="col">
            <InputSelect ValueExpression="@(()=>selectedMonth)"
                         Value="@selectedMonth"
                         ValueChanged="@((int value) => OnMonthValueChanged(value))" class="form-control">
                @for (int month = 1; month <= 12; month++)
                {
                    <option value="@month" selected="@(selectedMonth==month?true:false)">@Months[month-1]</option>
                }
            </InputSelect>
        </div>
    </div>
</div>

@code {
    [Parameter] public DateTime SelectedDate { get; set; }
    [Parameter] public string SelectName { get; set; }
    private int selectedDay { get; set; }
    private int selectedMonth { get; set; }
    private int numberOfDaysInSelectedMonth { get; set; } = 0;
    private const int year = 2001; //Not a leap year
    private string[] Months = { "Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August","September","Oktober","November","December"};
    [Parameter] public EventCallback<DateTime> OnDateSet { get; set; }

    protected override void OnInitialized()
    {
        selectedDay = SelectedDate.Day;
        selectedMonth = SelectedDate.Month;
        SetNumberOfDaysInMonth();
    }

    private void SetNumberOfDaysInMonth()
    {
        numberOfDaysInSelectedMonth = DateTime.DaysInMonth(year, selectedMonth);
    }
    private async Task OnDayValueChanged(int value)
    {
        selectedDay = value;
        await SetDate();
    }

    private async Task OnMonthValueChanged(int value)
    {
        selectedMonth = value;
        SetNumberOfDaysInMonth();

        if(selectedDay > numberOfDaysInSelectedMonth)
        {
            selectedDay = numberOfDaysInSelectedMonth;
        }
        await SetDate();
    }

    private async Task SetDate()
    {
        SelectedDate = new DateTime(
          year,
          selectedMonth,
          selectedDay,
          0, 0, 0
          );
        //My fix
        await OnDateSet.InvokeAsync(SelectedDate);
    }
}

When using the component I do this:

<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra"></DayMonthSelect>

I've created a work-around using an EventCallBack with the new DateTime, but I would rather not use this fix as it also requires a receiving function for each usage of the component.

[Parameter] public EventCallback<DateTime> OnDateSet { get; set; }

And adding calling the callback method

<DayMonthSelect SelectedDate="@serviceDescription.PlanValidFrom" SelectName="Gyldigt fra" OnDateSet="SetValidFromDate"></DayMonthSelect>

I've created other shared components when the input variable does get updated in the component. Just not this one!

Answer 1

" but I would rather not use this fix..." It's not a fix. That is the way to do it; passing the new value to the calling code (parent component) by means of an event call back...However, you may have all the relevant code in a single component; that is, the parent component, and no need to use a child component(not recommended, I've just pointed out this possibility).