add selectDate() method

dist/css/datepicker.css

@@ -74,10 +74,12 @@
   .datepicker--cell:hover {
     background: #eee; }
   .datepicker--cell.-current- {
-    color: #60C4F5;
+    color: #60C4F5; }
-    border: 1px solid #60C4F5; }
     .datepicker--cell.-current-:hover {
       background: rgba(96, 196, 245, 0.05); }
+  .datepicker--cell.-selected- {
+    color: #fff;
+    background: skyblue; }
 
 .datepicker--cell-day.-another-month- {
   color: #ddd; }

dist/js/datepicker.js

@@ -17,6 +17,13 @@ var Datepicker;
             defaultView: 'days',
             dateFormat: 'dd.mm.yyyy',
 
+            //TODO сделать минимальные, максимальные даты
+            minDate: '',
+            maxData: '',
+
+            //TODO сделать множественные даты
+            multipleDates: false,
+
             // navigation
             prevHtml: '«',
             nextHtml: '»',
@@ -47,7 +54,7 @@ var Datepicker;
 
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
-        this.selectedDate = [];
+        this.selectedDates = [];
         this.views = {};
 
         this.init()
@@ -151,6 +158,16 @@ var Datepicker;
             return result;
         },
 
+        selectDate: function (date) {
+            if (this.opts.multipleDates) {
+                // validate, push
+            } else {
+                this.selectedDates = [date];
+            }
+
+            this.views[this.currentView]._render()
+        },
+
         get parsedDate() {
             return Datepicker.getParsedDate(this.date);
         },
@@ -223,6 +240,20 @@ var Datepicker;
         });
     };
 
+    Datepicker.isSame = function (date1, date2, type) {
+        var d1 = Datepicker.getParsedDate(date1),
+            d2 = Datepicker.getParsedDate(date2),
+            _type = type ? type : 'day',
+
+            conditions = {
+                day: d1.date == d2.date && d1.month == d2.month && d1.year == d2.year,
+                month: d1.month == d2.month && d1.year == d2.year,
+                year: d1.year == d2.year
+            };
+
+        return conditions[_type];
+    };
+
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
@@ -414,9 +445,8 @@ Datepicker.Cell = function () {
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (d.month != this.d.parsedDate.month) _class += " -another-month-";
-            if (d.date == currentDate.getDate() &&
+            if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
-                d.month == currentDate.getMonth() &&
+            if (this._isSelected(date, 'day')) _class += ' -selected-';
-                d.year == currentDate.getFullYear()) _class += ' -current-';
 
             return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
         },
@@ -446,7 +476,7 @@ Datepicker.Cell = function () {
                 currentDate = new Date(),
                 loc = this.d.loc;
 
-            if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
+            if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
 
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
@@ -468,13 +498,14 @@ Datepicker.Cell = function () {
         _getYearHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-year",
                 decade = Datepicker.getDecade(this.d.date),
+                currentDate = new Date(),
                 d = Datepicker.getParsedDate(date);
 
             if (d.year < decade[0] || d.year > decade[1]) {
                 _class += ' -another-decade-';
             }
 
-            if (d.year == new Date().getFullYear()) _class += ' -current-';
+            if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
 
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },
@@ -503,6 +534,23 @@ Datepicker.Cell = function () {
             this._renderTypes[this.type].bind(this)()
         },
 
+        _isSelected: function (cellDate, cellType) {
+            var selectedDates = this.d.selectedDates,
+                len = selectedDates.length,
+                result;
+
+            if (!len) return false;
+
+            for (var i = 0; i < len; i++) {
+                if (Datepicker.isSame(selectedDates[i], cellDate, cellType)) {
+                    result = true;
+                    break;
+                }
+            }
+
+            return result;
+        },
+
         show: function () {
             this.$el.addClass('active');
             this.acitve = true;
@@ -522,6 +570,7 @@ Datepicker.Cell = function () {
                     d = this.d.parsedDate;
 
                 this.d.date = new Date(d.year, d.month, date);
+                this.d.selectDate(this.d.date);
 
                 if (this.d.opts.onChange) {
                     this.d._triggerOnChange()

js/datepicker/body.js

@@ -91,9 +91,8 @@
 
             if (this.d.isWeekend(d.day)) _class += " -weekend-";
             if (d.month != this.d.parsedDate.month) _class += " -another-month-";
-            if (d.date == currentDate.getDate() &&
+            if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
-                d.month == currentDate.getMonth() &&
+            if (this._isSelected(date, 'day')) _class += ' -selected-';
-                d.year == currentDate.getFullYear()) _class += ' -current-';
 
             return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
         },
@@ -123,7 +122,7 @@
                 currentDate = new Date(),
                 loc = this.d.loc;
 
-            if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
+            if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
 
             return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
         },
@@ -145,13 +144,14 @@
         _getYearHtml: function (date) {
             var _class = "datepicker--cell datepicker--cell-year",
                 decade = Datepicker.getDecade(this.d.date),
+                currentDate = new Date(),
                 d = Datepicker.getParsedDate(date);
 
             if (d.year < decade[0] || d.year > decade[1]) {
                 _class += ' -another-decade-';
             }
 
-            if (d.year == new Date().getFullYear()) _class += ' -current-';
+            if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
 
             return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
         },
@@ -180,6 +180,23 @@
             this._renderTypes[this.type].bind(this)()
         },
 
+        _isSelected: function (cellDate, cellType) {
+            var selectedDates = this.d.selectedDates,
+                len = selectedDates.length,
+                result;
+
+            if (!len) return false;
+
+            for (var i = 0; i < len; i++) {
+                if (Datepicker.isSame(selectedDates[i], cellDate, cellType)) {
+                    result = true;
+                    break;
+                }
+            }
+
+            return result;
+        },
+
         show: function () {
             this.$el.addClass('active');
             this.acitve = true;
@@ -199,6 +216,7 @@
                     d = this.d.parsedDate;
 
                 this.d.date = new Date(d.year, d.month, date);
+                this.d.selectDate(this.d.date);
 
                 if (this.d.opts.onChange) {
                     this.d._triggerOnChange()

js/datepicker/datepicker.js

@@ -17,6 +17,13 @@ var Datepicker;
             defaultView: 'days',
             dateFormat: 'dd.mm.yyyy',
 
+            //TODO сделать минимальные, максимальные даты
+            minDate: '',
+            maxData: '',
+
+            //TODO сделать множественные даты
+            multipleDates: false,
+
             // navigation
             prevHtml: '«',
             nextHtml: '»',
@@ -47,7 +54,7 @@ var Datepicker;
 
         this.currentDate = this.opts.start;
         this.currentView = this.opts.defaultView;
-        this.selectedDate = [];
+        this.selectedDates = [];
         this.views = {};
 
         this.init()
@@ -151,6 +158,16 @@ var Datepicker;
             return result;
         },
 
+        selectDate: function (date) {
+            if (this.opts.multipleDates) {
+                // validate, push
+            } else {
+                this.selectedDates = [date];
+            }
+
+            this.views[this.currentView]._render()
+        },
+
         get parsedDate() {
             return Datepicker.getParsedDate(this.date);
         },
@@ -223,6 +240,20 @@ var Datepicker;
         });
     };
 
+    Datepicker.isSame = function (date1, date2, type) {
+        var d1 = Datepicker.getParsedDate(date1),
+            d2 = Datepicker.getParsedDate(date2),
+            _type = type ? type : 'day',
+
+            conditions = {
+                day: d1.date == d2.date && d1.month == d2.month && d1.year == d2.year,
+                month: d1.month == d2.month && d1.year == d2.year,
+                year: d1.year == d2.year
+            };
+
+        return conditions[_type];
+    };
+
     $.fn[pluginName] = function ( options ) {
         if (Datepicker.prototype[options]) {
             Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));

sass/datepicker/_cell.scss

@@ -27,12 +27,16 @@
 
   &.-current- {
     color: $colorCellCurrent;
-    border: 1px solid $colorCellCurrent;
 
     &:hover {
       background: rgba($colorCellCurrent, .05);
     }
   }
+
+  &.-selected- {
+    color: #fff;
+    background: skyblue;
+  }
 }
 
 //  Day cell