daterangepicker
daterangepicker copied to clipboard
Add option to allow selection of end date first
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.
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.
+1 Works great! Thanks!
Would really appreciate for this PR to go through
+1 makes a range picker infinitely less annoying
+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.
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)
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
Also add support for dateLimit to also limit backward days too, not just forward, for example with dateLimit: { days: 3}
:
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');