How to make OnChange or OnClick for FluentDatePicker

[ifaizah]

`

<FluentDatePicker Label="End Date" Style="width:100%;" @bind-Value="@Content.end_date_leave" />

`

private async Task OnEndDateSelected() { if (Content.start_date_leave != null && Content.end_date_leave != null) { Content.total_days = (Content.end_date_leave - Content.start_date_leave).Value.Days.ToString(); } }

Please help me:

How to make Date picker like this.
When user selected a value for the end date, then go directly to the OnEndDateSelected function

[dvoituron]

You can add this attribute: @bind-Value:after="@OnEndDateSelected"

<FluentDatePicker Label="End Date" Style="width:100%;" @bind-Value="@Content.end_date_leave" @bind-Value:after="@OnEndDateSelected" />

[Nehakrg]

I encountered an issue with the code where it doesn’t function correctly when a date is selected and then partially deleted. Specifically, when the focus is lost by clicking elsewhere on the page or tabbing out, the OnEndDateSelected event fails to capture the updated value. For example, if the date is initially set to 9/24/2024 and the year “2024” is removed, OnEndDateSelected does not receive the updated value. In some cases, when the “/2024” is removed, the OnEndDateSelected event isn’t triggered at all, or the date value becomes null, even though the UI still displays 9/24.