CODEWITHSUNDEEP
c#.net-coreblazorblazor-webassemblymudblazor
wetfield
wetfield

Reputation: 135

Fetch new data when date picker changes

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.

Upvotes: 3

Views: 919

Answers (1)

Roman
Roman

Reputation: 12171

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();
    }   
}

Upvotes: 2

Related Questions