This is why I will not use the DateRangePicker

1 Answer 68 Views
DateRangePicker
Frederic
Top achievements
Rank 1
Veteran
Iron
Frederic asked on 16 Dec 2021, 07:42 PM

We try to always use a kendo component for our needs. 
But, for the first time, the kendo component we need in the framework is totally unusable, and we will not use it.

Instead, we will create a custom range picker, using 2 DatePicker.

First, when the range open, the 2 calendars are always based on the current day, not the range start / end.  We see the current month on the left side, and next month on the right.  We we should see, is the "start" month on the left when we click the "start" zone, and the end month on the right when we click the "end" zone to open it.

Also, we can't only change the "start" or "end" easily, we always need to re-select the whole range.

And, depending on the previous range, + the new range, sometimes, the "end" value becomes null / undefined %?!
And we may need to re-select the start date and/or end date twice, it's not easy to understand what is happening during a simple selection.

Finally, we tried to catch the "change" events, change the range manually, but there's nothing we can do to make that component easy to use for users.

https://dojo.telerik.com/@foxontherock/UKureVOy/2

Try to select a range, between 10 and 15.
Then, re-open it, and select 12 to 17.
Do you understand what just happened ?!?!? No one can. 2nd click becomes the first one, and the third click becomes the 2nd one, the first is ignored, and we see the "null" end date !?!?.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 21 Dec 2021, 03:36 PM

Hello, Frederic,

Thank you for the provided details and Dojo!

I'll start with the second problem. This appears to be a bug with the DateRangePicker and I have logged a public item in our Feedback Portal, as well a public issue in our public GitHub repository. You can track the progress of the fix there. I have also updated your Telerik Points as a sign of gratitude for reporting this behavior to us and providing a runnable example and explanation on how to reproduce the problem.

Please accept my apologies about the caused incovenience.

In regards to your first point, this is how the DateRangePicker is designed to work so I'm afraid I can't provide you with any solution to "separate" the start and end date calendars. Using two separate DatePickers(as you mentioned) would be the correct way to go in this case.

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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.

Frederic
Top achievements
Rank 1
Veteran
Iron
commented on 21 Dec 2021, 07:25 PM

Thank you for your response.

It's fine that you will fix the strange behavior that occurs when re-selecting in the middle of the range!

About the default calendar we see when we open it...

I don't mean that both calendar should be independant. 
I understand that they should be 2 consecutive months.

But, in that case: The selected range is from August to October, and we are in December.

If I click the "start" date, it should open and display august-september, not december-january, to see the start date on the left side.

Now, for the "end date"... if I can't change only the change date, you can open like if I click the start date.

But, if I can change "only" the end date, by clicking on the end date, then, it should open by displaying september-october, to see the "end date" on the right side.

But, because we always need to re-pick both, you can also open on august-october like when we click on the start date...
But please, do not open on "current month" + "next month" every time!

I think the months displayed when opening should be based on the current selection.

Thank you!

p.s. Finally, we did our solution with 2 independent calendars datepicker, and it works fine, by setting the "min" and "max" of the other, according to the section of the one that changes.

Georgi Denchev
Telerik team
commented on 23 Dec 2021, 12:22 PM

Hi, Frederic,

Thank you for clarfying the issue, I can see your point. Unfortunately, the Devs are currently out of office so I cannot ask for additional details in regards to this behavior. I'll mark this thread for an additional answer and I'll let you know once I have more information on the matter.

In the meantime, you can update the dateView object to open the calendar on the current selection manually.

        var kpicker = $('#sample1')[widget](opt).data(widget);
        // Update the dateView to display the month of the current selection(beginning from the start date).
        kpicker.dateView.value(kpicker.range().start);

Updated Dojo:

https://dojo.telerik.com/@gdenchev/OxoqaDAw 

Best Regards,

Georgi

Georgi Denchev
Telerik team
commented on 05 Jan 2022, 01:54 PM

Hi, Frederic,

I just wanted to let you know that the second issue has also been confirmed as a bug. I've updated the GitHub issue with additional information.

Thank you once again for reporting this.

Let me know if you have any other questions.

Best Regards,

Georgi

Tags
DateRangePicker
Asked by
Frederic
Top achievements
Rank 1
Veteran
Iron
Answers by
Georgi Denchev
Telerik team
Share this question
or