I understand you example but it is really simple. In fact, in a real case, the data must be resfreshed if start date or end date change and because we want to select a period, only if start or end date aren't null.

So to be able to manage this, it implies something like this :

private DateTime? PreviousStartValue {get; set; }
private DateTime? PreviousEndValue {get; set; }

async Task StartValueChangedHandler(DateTime? newStart)
{
this.PreviousStartValue = this.StartValue;
this.StartValue = newStart;
if(MustRefreshData())
{
}
}

async Task EndValueChangedHandler(DateTime? currEnd)
{
this.PreviousEndValue = this.EndValue;
this.EndValue = currEnd;
if(MustRefreshData())
{
}
}

private bool MustRefreshData()
{
if (this.StartValue == null || this.EndValue == null)
{
return;
}

if (this.StartValue != this.PreviousStartValue || this.EndValue != this.PreviousEndValue)
{
// Refresh
}
}

So be forced to add code like this in all pages that need this component is really surprising.

Hi,

"it is possible to use StartValueChanged and EndValueChanged to verify that both dates are populated before executing business logic"

Please explain me how I can do it to avoid calling a query twice.

Note : this is the main goal but not the only one.

Single TextBox is not a request, just a consequence of my request

My request is The result of the DateRangePicker must be the selection of a start date AND an end date

Actually, when you select the start date, because this date is binded, it is propagated to the parent component even if the end date hasn't been selected by the user.

The consequence is that each time the start date changed (even if the end date hasn't been selected), the code (and perhaps a query) will be executed which is a little strange.

=> The solution I gave you is to create a component which contains an Apply/Cancel buttons panel which apply the result when the 2 dates are selected.

At the same time, this solution improve (in my point of view) the user experience because sometimes I found difficult to select a period where dates are spaced from more than 2 months. Indeed, when I select the start date, all is ok but when I try to select the end date, the component change the start date date and not the end date.

Something like this