add minDate and maxDate

dist/css/datepicker.css

@@ -78,6 +78,7 @@
       background: rgba(96, 196, 245, 0.05); }
   .datepicker--cell.-disabled- {
     cursor: default;
+    color: #ddd;
     background: none; }
   .datepicker--cell.-selected- {
     color: #fff;

dist/js/datepicker.js

@@ -24,9 +24,10 @@ var Datepicker;
             selectOtherMonths: true,
             moveToOtherMonthsOnSelect: true,
 
-            //TODO сделать минимальные, максимальные даты
             minDate: '',
             maxDate: '',
+            //TODO сделать реакцию навигации на минимальную и максимальную даты
+            disableNavWhenOutOfRange: '',
 
             //TODO возможно добавить огрнаичивать число выделяемых дат
             multipleDates: false,
@@ -60,8 +61,11 @@ var Datepicker;
 
         this.inited = false;
         this.silent = false; // Need to prevent unnecessary rendering
+
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
+        this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
+        this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
         this.selectedDates = [];
         this.views = {};
 
@@ -226,6 +230,28 @@ var Datepicker;
             })
         },
 
+        /**
+         * Check if date is between minDate and maxDate
+         * @param date {object} - date object
+         * @param type {string} - cell type
+         * @returns {*}
+         * @private
+         */
+        _isInRange: function (date, type) {
+            var time = date.getTime(),
+                d = Datepicker.getParsedDate(date),
+                min = Datepicker.getParsedDate(this.minDate),
+                max = Datepicker.getParsedDate(this.maxDate),
+                dMinTime = new Date(d.year, d.month, min.date).getTime(),
+                dMaxTime = new Date(d.year, d.month, max.date).getTime(),
+                types = {
+                    day: time >= this.minTime && time <= this.maxTime,
+                    month: dMinTime >= this.minTime && dMaxTime <= this.maxTime,
+                    year: d.year >= min.year && d.year <= max.year
+                };
+            return type ? types[type] : types.day
+        },
+
         get parsedDate() {
             return Datepicker.getParsedDate(this.date);
         },
@@ -266,6 +292,17 @@ var Datepicker;
 
         get view() {
             return this.currentView;
+        },
+
+        get minTime() {
+            // Reset hours to 00:00, in case of new Date() is passed as option to minDate
+            var min = Datepicker.getParsedDate(this.minDate);
+            return new Date(min.year, min.month, min.date).getTime()
+        },
+
+        get maxTime() {
+            var max = Datepicker.getParsedDate(this.maxDate);
+            return new Date(max.year, max.month, max.date).getTime()
         }
     };
 
@@ -506,6 +543,7 @@ Datepicker.Cell = function () {
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+            if (!this.d._isInRange(date)) _class += ' -disabled-';
             if (d.month != this.d.parsedDate.month) {
                 _class += " -other-month-";
 
@@ -548,6 +586,7 @@ Datepicker.Cell = function () {
                 loc = this.d.loc;
 
             if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
+            if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
 
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
@@ -577,6 +616,7 @@ Datepicker.Cell = function () {
             }
 
             if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
+            if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
 
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },

js/datepicker/body.js

@@ -94,6 +94,7 @@
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+            if (!this.d._isInRange(date)) _class += ' -disabled-';
             if (d.month != this.d.parsedDate.month) {
                 _class += " -other-month-";
 
@@ -136,6 +137,7 @@
                 loc = this.d.loc;
 
             if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
+            if (!this.d._isInRange(date, 'month')) _class += ' -disabled-';
 
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
@@ -165,6 +167,7 @@
             }
 
             if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
+            if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
 
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },

js/datepicker/datepicker.js

@@ -24,9 +24,10 @@ var Datepicker;
             selectOtherMonths: true,
             moveToOtherMonthsOnSelect: true,
 
-            //TODO сделать минимальные, максимальные даты
             minDate: '',
             maxDate: '',
+            //TODO сделать реакцию навигации на минимальную и максимальную даты
+            disableNavWhenOutOfRange: '',
 
             //TODO возможно добавить огрнаичивать число выделяемых дат
             multipleDates: false,
@@ -60,8 +61,11 @@ var Datepicker;
 
         this.inited = false;
         this.silent = false; // Need to prevent unnecessary rendering
+
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
+        this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000);
+        this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000);
         this.selectedDates = [];
         this.views = {};
 
@@ -226,6 +230,28 @@ var Datepicker;
             })
         },
 
+        /**
+         * Check if date is between minDate and maxDate
+         * @param date {object} - date object
+         * @param type {string} - cell type
+         * @returns {*}
+         * @private
+         */
+        _isInRange: function (date, type) {
+            var time = date.getTime(),
+                d = Datepicker.getParsedDate(date),
+                min = Datepicker.getParsedDate(this.minDate),
+                max = Datepicker.getParsedDate(this.maxDate),
+                dMinTime = new Date(d.year, d.month, min.date).getTime(),
+                dMaxTime = new Date(d.year, d.month, max.date).getTime(),
+                types = {
+                    day: time >= this.minTime && time <= this.maxTime,
+                    month: dMinTime >= this.minTime && dMaxTime <= this.maxTime,
+                    year: d.year >= min.year && d.year <= max.year
+                };
+            return type ? types[type] : types.day
+        },
+
         get parsedDate() {
             return Datepicker.getParsedDate(this.date);
         },
@@ -266,6 +292,17 @@ var Datepicker;
 
         get view() {
             return this.currentView;
+        },
+
+        get minTime() {
+            // Reset hours to 00:00, in case of new Date() is passed as option to minDate
+            var min = Datepicker.getParsedDate(this.minDate);
+            return new Date(min.year, min.month, min.date).getTime()
+        },
+
+        get maxTime() {
+            var max = Datepicker.getParsedDate(this.maxDate);
+            return new Date(max.year, max.month, max.date).getTime()
         }
     };
 

sass/datepicker/_cell.scss

@@ -35,6 +35,7 @@
 
   &.-disabled- {
     cursor: default;
+    color: $colorGrey;
     background: none;
   }