Fetch new data when date picker changes

Question

I use MudBlazor and I have the following code in a Blazor Webassembly page (minimal example):

<MudDatePicker @bind-Date="@_chosenDate" />

@* Display data based on date above, here it is just an integer *@

@code {
    private DateTime? _chosenDate = DateTime.Now.Date;
    private int data = 0;

    private async Task FetchData()
    {
        await FetchDataFromApi(_chosenDate);
    }
}

Note that the default chosen date is set to today's date. Apparently, the MudDatePicker can only bind to a nullable DateTime, so that's why I set it to DateTime?.

Question: How do I fetch data from the API based on the new chosen value when the date is changed? I'm not sure what the proper way to do it is.

Answer 1

You can subscribe to DateChanged event and handle it:

<MudDatePicker Date="@_chosenDate" DateChanged="OnDateChange" /> // Date instead of @bind-Date

@code {
    private DateTime? _chosenDate = DateTime.Now.Date;
    private int data = 0;

    private async Task FetchData()
    {
        await FetchDataFromApi(_chosenDate);
    }

    async void OnDateChange(DateTime? newDate)
    {
        _chosenDate = newDate;

        await FetchData();
    }   
}