daterangepicker icon indicating copy to clipboard operation
daterangepicker copied to clipboard

Add option to allow selection of end date first

Open georgebohnisch opened this issue 5 years ago • 7 comments

Added a boolean option that allows the control to be initialized with the ability to select an end date first.

Example: User selects January 15 (start date is set) and then selects January 10 (normally this would reset the start date to January 10). If the option allowEndDateFirst is set to true, the start date is set to January 10 and the end date is set to January 15.

georgebohnisch avatar Aug 14 '18 21:08 georgebohnisch

Honestly, I feel that it is almost bug-level counter-intuitive user experience that this is not the default behavior. Making it available as an option seems like a no-brainer.

zacronos avatar Feb 06 '19 13:02 zacronos

+1 Works great! Thanks!

albertborsos avatar Feb 08 '19 15:02 albertborsos

Would really appreciate for this PR to go through

damianon avatar May 28 '19 12:05 damianon

+1 makes a range picker infinitely less annoying

phpMagpie avatar Jun 21 '19 13:06 phpMagpie

+1 yes please, I constantly find myself trying to pick the last date first, even when I know it isn't possible. Would LOVE to see this feature get merged.

luckyexpert avatar Oct 08 '19 12:10 luckyexpert

If anyone is using this option I made a small improvement: highlight current date start-end range when hovering through dates regardless if you set end date or start date first (more specifically if you click on a date and go either forward or backward with the mouse)

clip

diff --git a/daterangepicker.js b/daterangepicker.js
index 4369fbe..b8b190c 100644
--- a/daterangepicker.js
+++ b/daterangepicker.js
@@ -1471,7 +1471,7 @@
                     var cal = $(el).parents('.drp-calendar');
                     var dt = cal.hasClass('left') ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col];
 
-                    if ((dt.isAfter(startDate) && dt.isBefore(date)) || dt.isSame(date, 'day'))
+                    if (((dt.isAfter(startDate) && dt.isBefore(date) && date > startDate) || (dt.isBefore(startDate) && dt.isAfter(date) && date < startDate)) || dt.isSame(date, 'day'))
                     {
                         $(el).addClass('in-range');
                     } else

Shocker avatar Oct 28 '23 15:10 Shocker

Also add support for dateLimit to also limit backward days too, not just forward, for example with dateLimit: { days: 3}:

image

diff --git a/daterangepicker.js b/daterangepicker.js
index cdf0bcc..9be7f8d 100644
--- a/daterangepicker.js
+++ b/daterangepicker.js
@@ -869,6 +869,9 @@
             //grey out end dates beyond the maxSpan
             if (this.endDate == null && this.maxSpan)
             {
+                var minLimit = this.startDate.clone().subtract(this.maxSpan).startOf('day');
+                if (!minDate || minLimit.isAfter(minDate))
+                    minDate = minLimit;
                 var maxLimit = this.startDate.clone().add(this.maxSpan).endOf('day');
                 if (!maxDate || maxLimit.isBefore(maxDate))
                 {
@@ -907,6 +910,9 @@
                     if (this.minDate && calendar[row][col].isBefore(this.minDate, 'day'))
                         classes.push('off', 'disabled');
 
+                    //don't allow selection of dates before the minimum date
+                    if (minDate && calendar[row][col].isBefore(minDate, 'day'))
+                        classes.push('off', 'disabled');
                     //don't allow selection of dates after the maximum date
                     if (maxDate && calendar[row][col].isAfter(maxDate, 'day'))
                         classes.push('off', 'disabled');

Shocker avatar Oct 28 '23 15:10 Shocker