Need More Info
Last Updated: 17 Oct 2022 13:37 by ADMIN
Sylvain
Created on: 11 Oct 2022 11:23
Category: DateRangePicker
Type: Feature Request
1
Use a single textbox for the DateRangePicker

Hello,

Having one textbox and one label would be great. Please consider it.
7 comments
ADMIN
Dimo
Posted on: 17 Oct 2022 13:37

Hi Sylvain,

I agree with you, that's why we will review if it's possible to change the component behavior to handle such scenarios better.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Sylvain
Posted on: 17 Oct 2022 09:18

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.

 

ADMIN
Dimo
Posted on: 14 Oct 2022 13:49

Hi Sylvain,

The simplest case will look like this. You can:

  • Have the EndValue setting inside or outside the conditional statement.
  • Add more custom logic or include StartValueChanged if needed.
  • Basically, the two event handlers allow you to have more awareness and control related to the user actions and how the selected date range is changing.
<TelerikDateRangePicker @bind-StartValue="@StartValue"
                        EndValue="@EndValue"
                        EndValueChanged="@( (DateTime? newEnd) => EndValueChangedHandler(newEnd) )">
</TelerikDateRangePicker>

@code {
    public DateTime? StartValue { get; set; } = DateTime.Now;
    public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10);

    async Task StartValueChangedHandler(DateTime? newStart)
    {
        StartValue = newStart;
    }

    async Task EndValueChangedHandler(DateTime? currEnd)
    {
        if (currEnd != default(DateTime?))
        {
            EndValue = currEnd;

            // valid range, make a query
        }
    }
}

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Sylvain
Posted on: 11 Oct 2022 15:04

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.

ADMIN
Dimo
Posted on: 11 Oct 2022 14:10

Hello Sylvain,

Thanks for the follow-up. This shifts the focus a little. If the main goal is to avoid unnecessary queries, then it is possible to use StartValueChanged and EndValueChanged to verify that both dates are populated before executing business logic.

Regards,
Dimo
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Sylvain
Posted on: 11 Oct 2022 13:48

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

 

Attached Files:
ADMIN
Dimo
Posted on: 11 Oct 2022 11:24

Thanks for your suggestion, Sylvain.

We will appreciate the votes and feedback by all other developers - please share the benefits that a single textbox and label will bring, compared to the current setup. This will help us understand your scenarios and needs better.