From 1cedc77f96ff29cb903992a01a75d1bcb933d9fa Mon Sep 17 00:00:00 2001
From: Marcin Klinkosz <mklinkosz.pl@gmail.com>
Date: Wed, 13 Jan 2021 15:22:36 +0100
Subject: [PATCH] Add minSpan option

If you set minSpan option then selected date range cannot be shorter.
---
 daterangepicker.css |  6 +++++-
 daterangepicker.js  | 13 +++++++++++++
 demo.html           | 19 ++++++++++++++-----
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/daterangepicker.css b/daterangepicker.css
index a9638049..330ffae8 100644
--- a/daterangepicker.css
+++ b/daterangepicker.css
@@ -189,7 +189,11 @@
   color: #999;
 }
 
-.daterangepicker td.in-range {
+.daterangepicker td.off.in-range-min-span {
+  cursor: not-allowed;
+}
+
+.daterangepicker td.in-range, .daterangepicker td.off.in-range-min-span {
   background-color: #ebf4f8;
   border-color: transparent;
   color: #000;
diff --git a/daterangepicker.js b/daterangepicker.js
index 5f7d304b..25197888 100644
--- a/daterangepicker.js
+++ b/daterangepicker.js
@@ -38,6 +38,7 @@
         this.endDate = moment().endOf('day');
         this.minDate = false;
         this.maxDate = false;
+        this.minSpan = false;
         this.maxSpan = false;
         this.autoApply = false;
         this.singleDatePicker = false;
@@ -205,6 +206,9 @@
 
         if (typeof options.cancelClass === 'string') //backwards compat
             this.cancelButtonClasses = options.cancelClass;
+        
+        if (typeof options.minSpan === 'object')
+            this.minSpan = options.minSpan;
 
         if (typeof options.maxSpan === 'object')
             this.maxSpan = options.maxSpan;
@@ -330,6 +334,8 @@
                     start = this.minDate.clone();
 
                 var maxDate = this.maxDate;
+                if (this.minSpan && start.clone().add(this.minSpan).isAfter(end))
+                    end = start.clone().add(this.minSpan);
                 if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))
                     maxDate = start.clone().add(this.maxSpan);
                 if (maxDate && end.isAfter(maxDate))
@@ -499,6 +505,9 @@
 
             if (this.maxDate && this.endDate.isAfter(this.maxDate))
                 this.endDate = this.maxDate.clone();
+            
+            if (this.minSpan && this.startDate.clone().add(this.minSpan).isAfter(this.endDate))
+                this.endDate = this.startDate.clone().add(this.minSpan);
 
             if (this.maxSpan && this.startDate.clone().add(this.maxSpan).isBefore(this.endDate))
                 this.endDate = this.startDate.clone().add(this.maxSpan);
@@ -802,6 +811,10 @@
                     //don't allow selection of dates after the maximum date
                     if (maxDate && calendar[row][col].isAfter(maxDate, 'day'))
                         classes.push('off', 'disabled');
+                    
+                    //don't allow selection of dates between startDate and minSpan
+                    if (this.minSpan && this.startDate && calendar[row][col].isAfter(this.startDate, 'day') && calendar[row][col].isBefore(this.startDate.clone().add(this.minSpan), 'day'))
+                        classes.push('off', 'in-range-min-span');
 
                     //don't allow selection of date if a custom function decides it's invalid
                     if (this.isInvalidDate(calendar[row][col]))
diff --git a/demo.html b/demo.html
index 3157e8a1..c128131f 100644
--- a/demo.html
+++ b/demo.html
@@ -40,12 +40,12 @@ <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
 
               <div class="form-group">
                 <label for="startDate">startDate</label>
-                <input type="text" class="form-control" id="startDate" value="07/01/2015">
+                <input type="text" class="form-control" id="startDate" value="11/11/2021">
               </div>
 
               <div class="form-group">
                 <label for="endDate">endDate</label>
-                <input type="text" class="form-control" id="endDate" value="07/15/2015">
+                <input type="text" class="form-control" id="endDate" value="11/14/2021">
               </div>
 
               <div class="form-group">
@@ -113,10 +113,16 @@ <h1 style="margin: 0 0 20px 0">Configuration Builder</h1>
                   <input type="checkbox" id="timePickerSeconds"> timePickerSeconds
                 </label>
               </div>
+              
+              <div class="checkbox">
+                <label>
+                  <input type="checkbox" id="minSpan" checked="checked"> minSpan (with example value)
+                </label>
+              </div>
 
               <div class="checkbox">
                 <label>
-                  <input type="checkbox" id="dateLimit"> dateLimit (with example date range span)
+                  <input type="checkbox" id="maxSpan" checked="checked"> maxSpan (with example value)
                 </label>
               </div>
 
@@ -286,8 +292,11 @@ <h4>Configuration</h4>
           if ($('#autoApply').is(':checked'))
             options.autoApply = true;
 
-          if ($('#dateLimit').is(':checked'))
-            options.dateLimit = { days: 7 };
+          if ($('#minSpan').is(':checked'))
+            options.minSpan = { days: 3 };
+          
+          if ($('#maxSpan').is(':checked'))
+            options.maxSpan = { days: 7 };
 
           if ($('#ranges').is(':checked')) {
             options.ranges = {