From 8b65c88c8295ac2d24710e6bf731f0c45a9d3deb Mon Sep 17 00:00:00 2001 From: t1m0n Date: Tue, 27 Oct 2015 12:03:32 +0300 Subject: [PATCH] add selectDate() method --- dist/css/datepicker.css | 6 ++-- dist/js/datepicker.js | 61 +++++++++++++++++++++++++++++++++---- js/datepicker/body.js | 28 ++++++++++++++--- js/datepicker/datepicker.js | 33 +++++++++++++++++++- sass/datepicker/_cell.scss | 6 +++- 5 files changed, 119 insertions(+), 15 deletions(-) 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