I dont understand how date range picker has been designed.

Question

It seems that for the date range picker, they have just used two calendar views next to each other.

I see our users getting extremely confused with the UI, you can change dates on the left side calendar to be later than the right side calendar.

This seems like a serious flaw in the component if you ask me.

See the example below:

You can simulate this by clicking the '<' & '>' arrows in each calendar.

Another issue I noticed is that it also shows the 1st on both calendars which is very confusing.

Prince Oliver · Answer

Hi Dylan, 

Query: It seems that for the date range picker, they have just used two calendar views next to each other. I see our users getting extremely confused with the UI, you can change dates on the left side calendar to be later than the right side calendar. This seems like a serious flaw in the component if you ask me. 


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. 
 




  
 
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. 
 
Also note that every odd selections in the calendar will select the start date and even selection will select the end dates (i.e.) first selection will be considered as start date, the second selection as end date in any calendar and the third selection will set the start date resetting the previous range. 

Query: Another issue I noticed is that it also shows the 1st on both calendars which is very confusing. 

The 1st is the calendar just has the hover enabled when the calendar is in the focus to provide keyboard navigation support in the calendar elements. 

Please let us know if you have further queries. 

Regards, 
Prince