From 4fcf1700bbd0dfd4566c438da5beba162adf1c60 Mon Sep 17 00:00:00 2001
From: t1m0n <t1m0n.TR@gmail.com>
Date: Tue, 3 Nov 2015 12:08:28 +0300
Subject: [PATCH] add disableNavWhenOutOfRange option

---
 dist/css/datepicker.css          |  2 ++
 dist/js/datepicker.js            | 56 ++++++++++++++++++++++++++++++--
 index.html                       |  1 +
 js/datepicker/body.js            |  4 +++
 js/datepicker/datepicker.js      |  6 ++--
 js/datepicker/navigation.js      | 46 ++++++++++++++++++++++++++
 sass/datepicker/_navigation.scss |  4 +++
 7 files changed, 113 insertions(+), 6 deletions(-)

diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 83d15bb..4340950 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -44,6 +44,8 @@
   width: 32px; }
   .datepicker--nav-action:hover {
     background: #eee; }
+  .datepicker--nav-action.-disabled- {
+    visibility: hidden; }
 
 .datepicker--nav-title {
   align-self: center;
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index b16bf5a..fb3e64b 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -26,8 +26,7 @@ var Datepicker;
 
             minDate: '',
             maxDate: '',
-            //TODO сделать реакцию навигации на минимальную и максимальную даты
-            disableNavWhenOutOfRange: '',
+            disableNavWhenOutOfRange: true,
 
             //TODO возможно добавить огрнаичивать число выделяемых дат
             multipleDates: false,
@@ -38,6 +37,7 @@ var Datepicker;
             nextHtml: '&raquo;',
 
             // events
+            //TODO сделать обратный вызов
             onChange: ''
         };
 
@@ -234,7 +234,7 @@ var Datepicker;
          * Check if date is between minDate and maxDate
          * @param date {object} - date object
          * @param type {string} - cell type
-         * @returns {*}
+         * @returns {boolean}
          * @private
          */
         _isInRange: function (date, type) {
@@ -411,6 +411,7 @@ var Datepicker;
                 html = Datepicker.template(template, $.extend({title: title}, this.opts));
 
             this.d.$nav.html(html);
+            this.setNavStatus();
         },
 
         _getTitle: function (date) {
@@ -439,7 +440,52 @@ var Datepicker;
             }
 
             this.d.view = 'years';
+        },
+
+        setNavStatus: function () {
+            if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
+
+            var date = this.d.parsedDate,
+                m = date.month,
+                y = date.year,
+                d = date.date;
+
+            switch (this.d.view) {
+                case 'days':
+                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'months':
+                    if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'years':
+                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+            }
+        },
+
+        _disableNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
+        },
+
+        _activateNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
         }
+
     }
 
 })();
@@ -685,13 +731,17 @@ Datepicker.Cell = function () {
                 var month = el.data('month'),
                     d = this.d.parsedDate;
 
+                this.d.silent = true;
                 this.d.date = new Date(d.year, month, 1);
+                this.d.silent = false;
                 this.d.view = 'days';
             },
             years: function (el) {
                 var year = el.data('year');
 
+                this.d.silent = true;
                 this.d.date = new Date(year, 0, 1);
+                this.d.silent = false;
                 this.d.view = 'months';
             }
         },
diff --git a/index.html b/index.html
index f1c4bc4..957805b 100644
--- a/index.html
+++ b/index.html
@@ -16,6 +16,7 @@
         <script type="text/javascript" src="dist/js/datepicker.js"></script>
         <script type="text/javascript">
             $('.calendar').datepicker({
+                maxDate: new Date(2016, 0, 10),
                 onChange: function (dateString, date, inst) {
                     console.log(dateString);
                 }
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index 1f9a69d..db0ed9c 100644
--- a/js/datepicker/body.js
+++ b/js/datepicker/body.js
@@ -236,13 +236,17 @@
                 var month = el.data('month'),
                     d = this.d.parsedDate;
 
+                this.d.silent = true;
                 this.d.date = new Date(d.year, month, 1);
+                this.d.silent = false;
                 this.d.view = 'days';
             },
             years: function (el) {
                 var year = el.data('year');
 
+                this.d.silent = true;
                 this.d.date = new Date(year, 0, 1);
+                this.d.silent = false;
                 this.d.view = 'months';
             }
         },
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index 1169854..1d4dc5e 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -26,8 +26,7 @@ var Datepicker;
 
             minDate: '',
             maxDate: '',
-            //TODO сделать реакцию навигации на минимальную и максимальную даты
-            disableNavWhenOutOfRange: '',
+            disableNavWhenOutOfRange: true,
 
             //TODO возможно добавить огрнаичивать число выделяемых дат
             multipleDates: false,
@@ -38,6 +37,7 @@ var Datepicker;
             nextHtml: '&raquo;',
 
             // events
+            //TODO сделать обратный вызов
             onChange: ''
         };
 
@@ -234,7 +234,7 @@ var Datepicker;
          * Check if date is between minDate and maxDate
          * @param date {object} - date object
          * @param type {string} - cell type
-         * @returns {*}
+         * @returns {boolean}
          * @private
          */
         _isInRange: function (date, type) {
diff --git a/js/datepicker/navigation.js b/js/datepicker/navigation.js
index f4cf556..2a59df4 100644
--- a/js/datepicker/navigation.js
+++ b/js/datepicker/navigation.js
@@ -32,6 +32,7 @@
                 html = Datepicker.template(template, $.extend({title: title}, this.opts));
 
             this.d.$nav.html(html);
+            this.setNavStatus();
         },
 
         _getTitle: function (date) {
@@ -60,7 +61,52 @@
             }
 
             this.d.view = 'years';
+        },
+
+        setNavStatus: function () {
+            if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
+
+            var date = this.d.parsedDate,
+                m = date.month,
+                y = date.year,
+                d = date.date;
+
+            switch (this.d.view) {
+                case 'days':
+                    if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'months':
+                    if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+                case 'years':
+                    if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
+                        this._disableNav('prev')
+                    }
+                    if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
+                        this._disableNav('next')
+                    }
+                    break;
+            }
+        },
+
+        _disableNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
+        },
+
+        _activateNav: function (nav) {
+            $('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
         }
+
     }
 
 })();
diff --git a/sass/datepicker/_navigation.scss b/sass/datepicker/_navigation.scss
index a5f254c..c324b75 100644
--- a/sass/datepicker/_navigation.scss
+++ b/sass/datepicker/_navigation.scss
@@ -25,6 +25,10 @@
   &:hover {
     background: $colorCellHover;
   }
+
+  &.-disabled- {
+    visibility: hidden;
+  }
 }
 
 .datepicker--nav-title {