DateRangePicker broken (even in your getting started example)

Question

DateRangePicker does not work even on your getting started page ( https://ej2.syncfusion.com/angular/documentation/daterangepicker/getting-started/ ) nor in my project.

1) change both calendar panel to the same month.

1) pick some start date.

2) pick some end date.

Both dates will... Just broke. You can see it in action there: https://imgur.com/a/5OXoNGF

Sureshkumar P · Answer

Hi Jan, 
 
We have validated your reported issue; we cannot replicate from our end. we have attached the video demonstration for validating the reported issue in our angular sample browser.  
 
Video demonstration: https://www.syncfusion.com/downloads/support/forum/172827/ze/DateRangePicker-1794740071  
 
If still you have faced the same issue, then update your exact Syncfusion angular package version to validate the issue and provide exact solution as earlier as possible. 
 
Regards, 
Sureshkumar P

Jan Kondelík · Answer

In your video, you did not actually pick any date* nor changed any already selected date.*: well, you did but then you end your video.There are two step-by-step ways to break DateRangePicker (second one is easier and probably the core cause).First way to break DateRangePicker:1) open DateRangePicker dropdown.2) on start date, click "month" and select january.3) on end date, click "month" and select january. (now you have january on left and on right side)4) select 2022-02-01
as StartDate.5) select 2022-10-01 as EndDate.6) click apply.7) open DataRange picker dropdown with already selected dates.8) pick any EndDate. now, your StartDate is what you selected as EndDate and your EndDate disapeared.What i would expect: Start date remains the same, EndDate changed to newly selected one.You can see video in attachement "DateTimePickerbreak.zip/

2022-02-14 at 15-41-30.mp4"Second (easier) way to break DateRangePicker:​

1) open DateRangePicker dropdown.

2) select 2022-2-3 as "end date"3) select 2022-3-3 as "end date". -- now you have start date 2022-3-3 -- but you didnt select start date at all! -- and end date as 2022-2-34) select 2022-3-4 third date as "end date". -- now you have start date 2022-3-4 and no end date -- but you didnt select start date at all!What would i expect: when selecting EndDate, i should select EndDate (and not StartDate)You can see video in attachement "DateTimePickerbreak.zip/2022-02-14 at 15-53-57.mp4"Attachment: DateTimePickerbreak_100aee20.zip

Jan Kondelík · Answer

The simplest steps to reproduce:1) Open DateRangePicker dropdown (you can use https://ej2.syncfusion.com/angular/demos/#/bootstrap5/daterangepicker/default)2) select ANY date as EndDate - StartDate is what you selected (but you picked EndDate, not StartDate)3) select ANY date as EndDate - EndDate is what you selected, StartDate is same (but you picked EndDate two times)4) Select ANY date as EndDate - EndDate disappear, StartDate is now the date you picked.What would i expect: When picking EndDate, it should pick EndDate. When i pick EndDate, it should NOT pick StartDate.Video as attachment.Attachment: DateRangePickerselectEndDatethreetimes_b098f8b2.zip

Sureshkumar P · Answer

Jan, 
 
We suspect you had assumed that the left calendar in our daterangepicker component popups acts as the start date calendar and the right calendar acts as the end date calendar. But our component does not have specific calendar assigned for start or end date. In our popup, the first click selects start date and next click selects the end date value. Further click override the prior selection and set a new start date. i.e., the odd number of clicks selects the start date, while the even number of clicks selects the end date. This is our intended behavior of daterangepicker component. Hence the mentions scenario is not issue from our end. 
 
Regards, 
Sureshkumar P

Jan Kondelík · Answer

Yes, you are right, I assumed that.There is "StartDate" on top of left calendar and "EndDate" on top of the left one. This is bad UX at best.So, can you explain to me, why are there two calendars? Why not one, when it does not matter from which one i pick?

Prince Oliver · Answer

Hello Jan, 

Query: There is "StartDate" on top of left calendar and "EndDate" on top of the left one. 
 
The "StartDate", "EndDate" and “Selected Days” at the top of the calendar are just placeholders, when the start date and end date are selected in the popup these placeholders will be updated with the respective values. 
 




  
 
Query: can you explain to me, why are there two calendars? Why not one, when it does not matter from which one i pick? 
 
After you've chosen a start date in a calendar, you'll want to go on to the next month or year and choose an end date. You may do so easily with the start date in the view, as well as day, month, and week information. We cannot show both calendars when there is just a limited area for popup (mobile device), thus a single calendar will allow selection of both start and end dates. If each calendar is limited to picking either a start date or an end date, both calendars must be displayed in small sizes, which is not possible. As a result, for convenience, this functionality is extended to big resolutions as well. 

Regards, 
Prince