0

In the default case, when the user clicks on the input field corresponding to the end date, the calendar popup displays the starting month. For a use case where the user selects a large date range over many months, if he later wants to change only the end date by a slight margin he will have to click on the next button many times to get to the end date. This can lead to a bad user experience. Is there a way to change this?

BRS
  • 45
  • 7

1 Answers1

0

You can help user navigate through dates in the ranges of months as well as years in your calendar. This will reduce the number of times he has to hit the next button. I myself as a user have seen few web pages doing this:

<<        <         Month1         |        Month2         >        >>

           *  *  *  *  *  *  *          *  *  *  *  *  *  *
           *  *  *  *  *  *  *          *  *  *  *  *  *  *
           *  *  *  *  *  *  *          *  *  *  *  *  *  *
           *  *  *  *  *  *  *          *  *  *  *  *  *  *
           *  *  *  *  *  *  *          *  *  *  *  *  *  *

Or, better yet, you can let him type the date also in addition to selecting a date from the calendar.

Ramya Ramanathan
  • 78
  • 7
  • I have restricted my range to an year. But even then, if I want to change the end date by say 2 days, if the gap between the start and end date is huge, I will have to navigate over many months to get there. This is something I want to avoid. – BRS May 25 '18 at 04:57
  • So, your calendar is for a single year only. If you'd like to avoid too many button clicks that user has to do, after both start date and end date are selected in the calendar, you can have Month1 = start month and Month2 = end_month. Skip all months in the middle. Navigation buttons on either sides can be used to access months in the middle. – Ramya Ramanathan May 25 '18 at 07:27
  • Does the library provide any props to achieve that? – BRS May 25 '18 at 09:30
  • I think no. You can check the library documentation to be sure. You can treat your date input field as a text box also, letting user edit the date there directly. – Ramya Ramanathan May 25 '18 at 10:19