From 68131a2ddec77837e68ddb5ef6980866c8df051c Mon Sep 17 00:00:00 2001
From: t1m0n <t1m0n.TR@gmail.com>
Date: Thu, 15 Oct 2015 13:21:11 +0300
Subject: [PATCH] change next, prev month days count, begin prev() and next()
 methods

---
 dist/js/datepicker.js                  | 85 +++++++++++++++++++++-----
 js/datepicker/body.js                  | 12 ++--
 js/datepicker/datepicker.js            | 44 +++++++++++--
 js/datepicker/navigation.js            | 29 +++++++--
 sass/datepicker/datepicker-config.scss |  2 +-
 5 files changed, 141 insertions(+), 31 deletions(-)

diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index d17b5f2..aca90e0 100644
--- a/dist/js/datepicker.js
+++ b/dist/js/datepicker.js
@@ -14,6 +14,7 @@ var Datepicker;
             firstDay: 1, // Week's first day
             start: '', // Start date
             weekends: [6, 0],
+            defaultView: 'days',
             format: 'dd.mm.yyyy',
 
             // navigation
@@ -39,7 +40,11 @@ var Datepicker;
             $body = $('body');
         }
 
+        this.inited = false;
+
         this.currentDate = this.opts.start;
+        this.view = this.opts.defaultView;
+        this.activeView = this.opts.defaultView;
 
         this.init()
     };
@@ -52,11 +57,12 @@ var Datepicker;
 
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.days = new Datepicker.Body(this, 'days', this.opts);
+
+            this.inited = true;
         },
 
         isWeekend: function (day) {
             return this.opts.weekends.indexOf(day) !== -1;
-
         },
 
         _buildDatepickersContainer: function () {
@@ -77,9 +83,39 @@ var Datepicker;
 
         _defineDOM: function () {
 
+        },
+
+        next: function () {
+            var d = this.parsedDate;
+            this.date = new Date(d.year, d.month + 1, 1);
+        },
+
+        prev: function () {
+            var d = this.parsedDate;
+            this.date = new Date(d.year, d.month - 1, 1);
+        },
+
+        get parsedDate() {
+            return Datepicker.getParsedDate(this.date);
         }
     };
 
+    Object.defineProperty(Datepicker.prototype , 'date', {
+        set: function (val) {
+            this.currentDate = val;
+
+            if (this.inited) {
+                this[this.activeView]._render();
+                this.nav._render();
+            }
+
+            return val;
+        },
+        get: function () {
+            return this.currentDate
+        }
+    });
+
 
     Datepicker.getDaysCount = function (date) {
         return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -87,9 +123,9 @@ var Datepicker;
 
     Datepicker.getParsedDate = function (date) {
         return {
-            year: date.getUTCFullYear(),
-            month: date.getUTCMonth(),
-            day: date.getUTCDay()
+            year: date.getFullYear(),
+            month: date.getMonth(),
+            day: date.getDay()
         }
     };
 
@@ -133,9 +169,9 @@ var Datepicker;
 
 ;(function () {
     var template = '' +
-        '<div class="datepicker--nav-action">#{prevHtml}</div>' +
+        '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
         '<div class="datepicker--nav-title">#{title}</div>' +
-        '<div class="datepicker--nav-action">#{nextHtml}</div>';
+        '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>';
 
     Datepicker.Navigation = function (d, opts) {
         this.d = d;
@@ -147,20 +183,37 @@ var Datepicker;
     Datepicker.Navigation.prototype = {
         init: function () {
             this._buildBaseHtml();
+            this._bindEvents();
         },
-        
+
+        _bindEvents: function () {
+            this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
+        },
+
         _buildBaseHtml: function () {
-            var title = this._getTitle(this.d.currentDate);
+            this._render();
+            this.$navButton = $('.datepicker--nav-action', this.d.$nav);
+        },
+
+        _render: function () {
+            var title = this._getTitle(this.d.currentDate),
                 html = Datepicker.template(template, $.extend({title: title}, this.opts));
 
             this.d.$nav.html(html);
         },
 
         _getTitle: function (date) {
-            var month = this.d.loc.months[date.getUTCMonth()],
-                year = date.getUTCFullYear();
+            var month = this.d.loc.months[date.getMonth()],
+                year = date.getFullYear();
 
             return month + ', ' + year;
+        },
+
+        _onClickNavButton: function (e) {
+            var $el = $(e.target),
+                action = $el.data('action');
+
+            this.d[action]();
         }
     }
 
@@ -188,6 +241,7 @@ Datepicker.Cell = function () {
 
     Datepicker.Body.prototype = {
         init: function () {
+            this._buildBaseHtml();
             this._render();
         },
 
@@ -218,17 +272,19 @@ Datepicker.Cell = function () {
          */
         _getDaysHtml: function (date) {
             var totalMonthDays = Datepicker.getDaysCount(date),
-
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
+                daysFromPevMonth = firstMonthDay - this.opts.firstDay,
+                daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
 
-                remainingDays = 6 - lastMonthDay + this.opts.firstDay,
-                startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
+            daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
+            daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
 
+            var startDayIndex = -daysFromPevMonth + 1,
                 m, y,
                 html = '';
 
-            for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
+            for (var i = startDayIndex, max = totalMonthDays + daysFromNextMonth; i <= max; i++) {
                 y = date.getFullYear();
                 m = date.getMonth();
 
@@ -256,7 +312,6 @@ Datepicker.Cell = function () {
         },
 
         _render: function () {
-            this._buildBaseHtml();
             this._renderDays();
         }
     };
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index de90e9e..ee5652c 100644
--- a/js/datepicker/body.js
+++ b/js/datepicker/body.js
@@ -17,6 +17,7 @@
 
     Datepicker.Body.prototype = {
         init: function () {
+            this._buildBaseHtml();
             this._render();
         },
 
@@ -47,17 +48,19 @@
          */
         _getDaysHtml: function (date) {
             var totalMonthDays = Datepicker.getDaysCount(date),
-
                 firstMonthDay = new Date(date.getFullYear(), date.getMonth(), 1).getDay(),
                 lastMonthDay = new Date(date.getFullYear(), date.getMonth(), totalMonthDays).getDay(),
+                daysFromPevMonth = firstMonthDay - this.opts.firstDay,
+                daysFromNextMonth = 6 - lastMonthDay + this.opts.firstDay;
 
-                remainingDays = 6 - lastMonthDay + this.opts.firstDay,
-                startDayIndex = this.opts.firstDay - (firstMonthDay - 1), // Minus one, because of zero based counter
+            daysFromPevMonth = daysFromPevMonth < 0 ? daysFromPevMonth + 7 : daysFromPevMonth;
+            daysFromNextMonth = daysFromNextMonth > 6 ? daysFromNextMonth - 7 : daysFromNextMonth;
 
+            var startDayIndex = -daysFromPevMonth + 1,
                 m, y,
                 html = '';
 
-            for (var i = startDayIndex, max = totalMonthDays + remainingDays; i <= max; i++) {
+            for (var i = startDayIndex, max = totalMonthDays + daysFromNextMonth; i <= max; i++) {
                 y = date.getFullYear();
                 m = date.getMonth();
 
@@ -85,7 +88,6 @@
         },
 
         _render: function () {
-            this._buildBaseHtml();
             this._renderDays();
         }
     };
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index 7578ba3..f42bbe9 100644
--- a/js/datepicker/datepicker.js
+++ b/js/datepicker/datepicker.js
@@ -14,6 +14,7 @@ var Datepicker;
             firstDay: 1, // Week's first day
             start: '', // Start date
             weekends: [6, 0],
+            defaultView: 'days',
             format: 'dd.mm.yyyy',
 
             // navigation
@@ -39,7 +40,11 @@ var Datepicker;
             $body = $('body');
         }
 
+        this.inited = false;
+
         this.currentDate = this.opts.start;
+        this.view = this.opts.defaultView;
+        this.activeView = this.opts.defaultView;
 
         this.init()
     };
@@ -52,11 +57,12 @@ var Datepicker;
 
             this.nav = new Datepicker.Navigation(this, this.opts);
             this.days = new Datepicker.Body(this, 'days', this.opts);
+
+            this.inited = true;
         },
 
         isWeekend: function (day) {
             return this.opts.weekends.indexOf(day) !== -1;
-
         },
 
         _buildDatepickersContainer: function () {
@@ -77,9 +83,39 @@ var Datepicker;
 
         _defineDOM: function () {
 
+        },
+
+        next: function () {
+            var d = this.parsedDate;
+            this.date = new Date(d.year, d.month + 1, 1);
+        },
+
+        prev: function () {
+            var d = this.parsedDate;
+            this.date = new Date(d.year, d.month - 1, 1);
+        },
+
+        get parsedDate() {
+            return Datepicker.getParsedDate(this.date);
         }
     };
 
+    Object.defineProperty(Datepicker.prototype , 'date', {
+        set: function (val) {
+            this.currentDate = val;
+
+            if (this.inited) {
+                this[this.activeView]._render();
+                this.nav._render();
+            }
+
+            return val;
+        },
+        get: function () {
+            return this.currentDate
+        }
+    });
+
 
     Datepicker.getDaysCount = function (date) {
         return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -87,9 +123,9 @@ var Datepicker;
 
     Datepicker.getParsedDate = function (date) {
         return {
-            year: date.getUTCFullYear(),
-            month: date.getUTCMonth(),
-            day: date.getUTCDay()
+            year: date.getFullYear(),
+            month: date.getMonth(),
+            day: date.getDay()
         }
     };
 
diff --git a/js/datepicker/navigation.js b/js/datepicker/navigation.js
index ff2be68..61120fd 100644
--- a/js/datepicker/navigation.js
+++ b/js/datepicker/navigation.js
@@ -1,8 +1,8 @@
 ;(function () {
     var template = '' +
-        '<div class="datepicker--nav-action">#{prevHtml}</div>' +
+        '<div class="datepicker--nav-action" data-action="prev">#{prevHtml}</div>' +
         '<div class="datepicker--nav-title">#{title}</div>' +
-        '<div class="datepicker--nav-action">#{nextHtml}</div>';
+        '<div class="datepicker--nav-action" data-action="next">#{nextHtml}</div>';
 
     Datepicker.Navigation = function (d, opts) {
         this.d = d;
@@ -14,20 +14,37 @@
     Datepicker.Navigation.prototype = {
         init: function () {
             this._buildBaseHtml();
+            this._bindEvents();
         },
-        
+
+        _bindEvents: function () {
+            this.d.$nav.on('click', '.datepicker--nav-action', $.proxy(this._onClickNavButton, this));
+        },
+
         _buildBaseHtml: function () {
-            var title = this._getTitle(this.d.currentDate);
+            this._render();
+            this.$navButton = $('.datepicker--nav-action', this.d.$nav);
+        },
+
+        _render: function () {
+            var title = this._getTitle(this.d.currentDate),
                 html = Datepicker.template(template, $.extend({title: title}, this.opts));
 
             this.d.$nav.html(html);
         },
 
         _getTitle: function (date) {
-            var month = this.d.loc.months[date.getUTCMonth()],
-                year = date.getUTCFullYear();
+            var month = this.d.loc.months[date.getMonth()],
+                year = date.getFullYear();
 
             return month + ', ' + year;
+        },
+
+        _onClickNavButton: function (e) {
+            var $el = $(e.target),
+                action = $el.data('action');
+
+            this.d[action]();
         }
     }
 
diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss
index 1688202..d14430d 100644
--- a/sass/datepicker/datepicker-config.scss
+++ b/sass/datepicker/datepicker-config.scss
@@ -10,4 +10,4 @@ $colorAnotherMonth: #ddd;
 $colorCellHover: '';
 $colorCellCurrent: '';
 $colorCellSelected: '';
-$colorCellWeekend: '';
+$colorCellWeekend: '';
\ No newline at end of file