diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css
index 927e640..80e9ede 100644
--- a/dist/css/datepicker.css
+++ b/dist/css/datepicker.css
@@ -74,10 +74,12 @@
.datepicker--cell:hover {
background: #eee; }
.datepicker--cell.-current- {
- color: #60C4F5;
- border: 1px solid #60C4F5; }
+ color: #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; }
diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js
index b517efd..77783f9 100644
--- a/dist/js/datepicker.js
+++ b/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() &&
- d.month == currentDate.getMonth() &&
- d.year == currentDate.getFullYear()) _class += ' -current-';
+ if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
+ if (this._isSelected(date, 'day')) _class += ' -selected-';
return '' + date.getDate() + '
';
},
@@ -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 '' + loc.months[d.month] + '
'
},
@@ -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 '' + d.year + '
'
},
@@ -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()
diff --git a/js/datepicker/body.js b/js/datepicker/body.js
index 6ca3640..ffcd865 100644
--- a/js/datepicker/body.js
+++ b/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() &&
- d.month == currentDate.getMonth() &&
- d.year == currentDate.getFullYear()) _class += ' -current-';
+ if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
+ if (this._isSelected(date, 'day')) _class += ' -selected-';
return '' + date.getDate() + '
';
},
@@ -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 '' + loc.months[d.month] + '
'
},
@@ -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 '' + d.year + '
'
},
@@ -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()
diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js
index b57aa8d..a7d8f49 100644
--- a/js/datepicker/datepicker.js
+++ b/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));
diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss
index e8a7a22..ae811a1 100644
--- a/sass/datepicker/_cell.scss
+++ b/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