add showOtherMonths, selectOtherMonths, moveToOtherMonthsOnSelect options

dist/css/datepicker.css

@@ -8,8 +8,7 @@
   width: 224px; }
 
 .datepicker--body {
-  display: none;
+  display: none; }
-  margin: -1px; }
   .datepicker--body.active {
     display: block; }
 
@@ -77,12 +76,26 @@
     color: #60C4F5; }
     .datepicker--cell.-current-:hover {
       background: rgba(96, 196, 245, 0.05); }
+  .datepicker--cell.-disabled- {
+    cursor: default;
+    background: none; }
   .datepicker--cell.-selected- {
     color: #fff;
     background: skyblue; }
+    .datepicker--cell.-selected-.-current- {
+      color: #fff;
+      background: skyblue; }
 
-.datepicker--cell-day.-other-month- {
+.datepicker--cell-day {
-  color: #ddd; }
+  border-radius: 50%; }
+  .datepicker--cell-day.-other-month- {
+    color: #ddd; }
+    .datepicker--cell-day.-other-month-.-selected- {
+      color: #fff;
+      background: #def2fa; }
+      .datepicker--cell-day.-other-month-.-selected-.-disabled- {
+        background: none;
+        border: none; }
 
 .datepicker--cell-month {
   width: 33.33%;

dist/js/datepicker.js

@@ -9,6 +9,7 @@ var Datepicker;
             '<div class="datepicker--content"></div>' +
             '</div>',
         defaults = {
+            //TODO сделать работу с инпутом
             inline: true,
             region: 'ru',
             firstDay: 1, // Week's first day
@@ -18,8 +19,10 @@ var Datepicker;
             dateFormat: 'dd.mm.yyyy',
             toggleSelected: true,
 
-            showOtherMonths: '',
+            //TODO сделать тоже самое с годами
-            selectOtherMonths: '',
+            showOtherMonths: true,
+            selectOtherMonths: true,
+            moveToOtherMonthsOnSelect: true,
 
             //TODO сделать минимальные, максимальные даты
             minDate: '',
@@ -56,7 +59,7 @@ var Datepicker;
         }
 
         this.inited = false;
-
+        this.silent = false; // Need to prevent unnecessary rendering
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
         this.selectedDates = [];
@@ -184,6 +187,15 @@ var Datepicker;
         },
 
         selectDate: function (date) {
+            var d = this.parsedDate;
+
+            if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
+                this.silent = true;
+                this.date = new Date(date.getFullYear(),date.getMonth(), 1);
+                this.silent = false;
+                this.nav._render()
+            }
+
             if (this.opts.multipleDates) {
                 if (!this._isSelected(date)) {
                     this.selectedDates.push(date);
@@ -221,7 +233,7 @@ var Datepicker;
         set date (val) {
             this.currentDate = val;
 
-            if (this.inited) {
+            if (this.inited && !this.silent) {
                 this.views[this.view]._render();
                 this.nav._render();
             }
@@ -487,14 +499,27 @@ Datepicker.Cell = function () {
         _getDayHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-day",
                 currentDate = new Date(),
-                d = Datepicker.getParsedDate(date);
+                d = Datepicker.getParsedDate(date),
+                html = d.date;
+
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
-            if (d.month != this.d.parsedDate.month) _class += " -other-month-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+            if (d.month != this.d.parsedDate.month) {
+                _class += " -other-month-";
 
-            return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
+                if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
+                    _class += " -disabled-";
+                }
+
+                if (!this.opts.showOtherMonths) html = '';
+            }
+
+            return '<div class="' + _class + '" ' +
+                'data-date="' + date.getDate() + '" ' +
+                'data-month="' + date.getMonth() + '" ' +
+                'data-year="' + date.getFullYear() + '">' + html + '</div>';
         },
 
         /**
@@ -577,7 +602,7 @@ Datepicker.Cell = function () {
         },
 
         _render: function () {
-            this._renderTypes[this.type].bind(this)()
+            this._renderTypes[this.type].bind(this)();
         },
 
         show: function () {
@@ -595,10 +620,12 @@ Datepicker.Cell = function () {
 
         _handleClick: {
             days: function (el) {
+                if (el.hasClass('-disabled-')) return;
+
                 var date = el.data('date'),
                     month = el.data('month'),
-                    d = this.d.parsedDate,
+                    year = el.data('year'),
-                    selectedDate = new Date(d.year, month, date),
+                    selectedDate = new Date(year, month, date),
                     alreadySelected = this.d._isSelected(selectedDate, 'day'),
                     triggerOnChange = true;
 

js/datepicker/body.js

@@ -87,14 +87,27 @@
         _getDayHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-day",
                 currentDate = new Date(),
-                d = Datepicker.getParsedDate(date);
+                d = Datepicker.getParsedDate(date),
+                html = d.date;
+
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
-            if (d.month != this.d.parsedDate.month) _class += " -other-month-";
             if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
             if (this.d._isSelected(date, 'day')) _class += ' -selected-';
+            if (d.month != this.d.parsedDate.month) {
+                _class += " -other-month-";
 
-            return '<div class="' + _class + '" data-date="' + date.getDate() + '" data-month="' + date.getMonth() + '">' + date.getDate() + '</div>';
+                if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) {
+                    _class += " -disabled-";
+                }
+
+                if (!this.opts.showOtherMonths) html = '';
+            }
+
+            return '<div class="' + _class + '" ' +
+                'data-date="' + date.getDate() + '" ' +
+                'data-month="' + date.getMonth() + '" ' +
+                'data-year="' + date.getFullYear() + '">' + html + '</div>';
         },
 
         /**
@@ -177,7 +190,7 @@
         },
 
         _render: function () {
-            this._renderTypes[this.type].bind(this)()
+            this._renderTypes[this.type].bind(this)();
         },
 
         show: function () {
@@ -195,10 +208,12 @@
 
         _handleClick: {
             days: function (el) {
+                if (el.hasClass('-disabled-')) return;
+
                 var date = el.data('date'),
                     month = el.data('month'),
-                    d = this.d.parsedDate,
+                    year = el.data('year'),
-                    selectedDate = new Date(d.year, month, date),
+                    selectedDate = new Date(year, month, date),
                     alreadySelected = this.d._isSelected(selectedDate, 'day'),
                     triggerOnChange = true;
 

js/datepicker/datepicker.js

@@ -9,6 +9,7 @@ var Datepicker;
             '<div class="datepicker--content"></div>' +
             '</div>',
         defaults = {
+            //TODO сделать работу с инпутом
             inline: true,
             region: 'ru',
             firstDay: 1, // Week's first day
@@ -18,8 +19,10 @@ var Datepicker;
             dateFormat: 'dd.mm.yyyy',
             toggleSelected: true,
 
-            showOtherMonths: '',
+            //TODO сделать тоже самое с годами
-            selectOtherMonths: '',
+            showOtherMonths: true,
+            selectOtherMonths: true,
+            moveToOtherMonthsOnSelect: true,
 
             //TODO сделать минимальные, максимальные даты
             minDate: '',
@@ -56,7 +59,7 @@ var Datepicker;
         }
 
         this.inited = false;
-
+        this.silent = false; // Need to prevent unnecessary rendering
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
         this.selectedDates = [];
@@ -184,6 +187,15 @@ var Datepicker;
         },
 
         selectDate: function (date) {
+            var d = this.parsedDate;
+
+            if (date.getMonth() != d.month && this.opts.moveToOtherMonthsOnSelect) {
+                this.silent = true;
+                this.date = new Date(date.getFullYear(),date.getMonth(), 1);
+                this.silent = false;
+                this.nav._render()
+            }
+
             if (this.opts.multipleDates) {
                 if (!this._isSelected(date)) {
                     this.selectedDates.push(date);
@@ -221,7 +233,7 @@ var Datepicker;
         set date (val) {
             this.currentDate = val;
 
-            if (this.inited) {
+            if (this.inited && !this.silent) {
                 this.views[this.view]._render();
                 this.nav._render();
             }

sass/datepicker/_cell.scss

@@ -33,9 +33,19 @@
     }
   }
 
+  &.-disabled- {
+    cursor: default;
+    background: none;
+  }
+
   &.-selected- {
     color: #fff;
-    background: skyblue;
+    background: $colorCellSelected;
+
+    &.-current- {
+      color: #fff;
+      background: $colorCellSelected;
+    }
   }
 }
 
@@ -43,8 +53,21 @@
 // -------------------------------------------------
 
 .datepicker--cell-day {
+  border-radius: 50%;
+
   &.-other-month- {
     color: $colorAnotherMonth;
+
+    &.-selected- {
+      color: #fff;
+      background: lighten($colorCellSelected, 20%);
+
+      &.-disabled- {
+        background: none;
+        border: none;
+      }
+
+    }
   }
 }
 

sass/datepicker/_datepicker.scss

@@ -16,7 +16,6 @@
 
 .datepicker--body {
   display: none;
-  margin: -1px;
 
   &.active {
     display: block;

sass/datepicker/datepicker-config.scss

@@ -12,5 +12,5 @@ $colorGrey: #ddd;
 $colorAnotherMonth: #ddd;
 $colorCellHover: #eee;
 $colorCellCurrent: #60C4F5;
-$colorCellSelected: '';
+$colorCellSelected: skyblue;
 $colorCellWeekend: '';