From 807923600e5e34577f126feb5b25f9135ea4cd3e Mon Sep 17 00:00:00 2001 From: t1m0n Date: Wed, 28 Oct 2015 11:24:33 +0300 Subject: [PATCH] add toggleSelected option implementation --- dist/css/datepicker.css | 2 +- dist/js/datepicker.js | 42 +++++++++++++++++++++++++++++++------ index.html | 1 - js/datepicker/body.js | 17 +++++++++++---- js/datepicker/datepicker.js | 26 ++++++++++++++++++++--- sass/datepicker/_cell.scss | 2 +- 6 files changed, 74 insertions(+), 16 deletions(-) diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index 80e9ede..fd076c3 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -81,7 +81,7 @@ color: #fff; background: skyblue; } -.datepicker--cell-day.-another-month- { +.datepicker--cell-day.-other-month- { color: #ddd; } .datepicker--cell-month { diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index 1deae39..b04f56e 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -16,13 +16,17 @@ var Datepicker; weekends: [6, 0], defaultView: 'days', dateFormat: 'dd.mm.yyyy', + toggleSelected: true, + + showOtherMonths: '', + selectOtherMonths: '', //TODO сделать минимальные, максимальные даты minDate: '', - maxData: '', + maxDate: '', //TODO возможно добавить огрнаичивать число выделяемых дат - multipleDates: true, + multipleDates: false, multipleDatesSeparator: ',', // navigation @@ -100,6 +104,10 @@ var Datepicker; }, _triggerOnChange: function (cellType) { + if (!this.selectedDates.length) { + return this.opts.onChange('', '', this); + } + var selectedDates = this.selectedDates, parsedSelected = Datepicker.getParsedDate(selectedDates[0]), formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]), @@ -187,6 +195,19 @@ var Datepicker; this.views[this.currentView]._render() }, + removeDate: function (date) { + var selected = this.selectedDates, + _this = this; + + return selected.some(function (curDate, i) { + if (Datepicker.isSame(curDate, date)) { + selected.splice(i, 1); + _this.views[_this.currentView]._render(); + return true + } + }) + }, + _isSelected: function (checkDate, cellType) { return this.selectedDates.some(function (date) { return Datepicker.isSame(date, checkDate, cellType) @@ -469,7 +490,7 @@ Datepicker.Cell = function () { d = Datepicker.getParsedDate(date); if (this.d.isWeekend(d.day)) _class += " -weekend-"; - if (d.month != this.d.parsedDate.month) _class += " -another-month-"; + 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-'; @@ -576,11 +597,20 @@ Datepicker.Cell = function () { days: function (el) { var date = el.data('date'), month = el.data('month'), - d = this.d.parsedDate; + d = this.d.parsedDate, + selectedDate = new Date(d.year, month, date), + alreadySelected = this.d._isSelected(selectedDate, 'day'), + triggerOnChange = true; - this.d.selectDate(new Date(d.year, month, date)); + if (!alreadySelected) { + this.d.selectDate(selectedDate); + } else if (alreadySelected && this.opts.toggleSelected){ + this.d.removeDate(selectedDate); + } else if (alreadySelected && !this.opts.toggleSelected) { + triggerOnChange = false; + } - if (this.d.opts.onChange) { + if (triggerOnChange) { this.d._triggerOnChange() } }, diff --git a/index.html b/index.html index d958177..f1c4bc4 100644 --- a/index.html +++ b/index.html @@ -18,7 +18,6 @@ $('.calendar').datepicker({ onChange: function (dateString, date, inst) { console.log(dateString); - console.log(date[0].getFullYear()); } }); diff --git a/js/datepicker/body.js b/js/datepicker/body.js index 1b283ef..c45b69a 100644 --- a/js/datepicker/body.js +++ b/js/datepicker/body.js @@ -90,7 +90,7 @@ d = Datepicker.getParsedDate(date); if (this.d.isWeekend(d.day)) _class += " -weekend-"; - if (d.month != this.d.parsedDate.month) _class += " -another-month-"; + 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-'; @@ -197,11 +197,20 @@ days: function (el) { var date = el.data('date'), month = el.data('month'), - d = this.d.parsedDate; + d = this.d.parsedDate, + selectedDate = new Date(d.year, month, date), + alreadySelected = this.d._isSelected(selectedDate, 'day'), + triggerOnChange = true; - this.d.selectDate(new Date(d.year, month, date)); + if (!alreadySelected) { + this.d.selectDate(selectedDate); + } else if (alreadySelected && this.opts.toggleSelected){ + this.d.removeDate(selectedDate); + } else if (alreadySelected && !this.opts.toggleSelected) { + triggerOnChange = false; + } - if (this.d.opts.onChange) { + if (triggerOnChange) { this.d._triggerOnChange() } }, diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js index 274bc1e..f01814b 100644 --- a/js/datepicker/datepicker.js +++ b/js/datepicker/datepicker.js @@ -16,13 +16,17 @@ var Datepicker; weekends: [6, 0], defaultView: 'days', dateFormat: 'dd.mm.yyyy', + toggleSelected: true, + + showOtherMonths: '', + selectOtherMonths: '', //TODO сделать минимальные, максимальные даты minDate: '', - maxData: '', + maxDate: '', //TODO возможно добавить огрнаичивать число выделяемых дат - multipleDates: true, + multipleDates: false, multipleDatesSeparator: ',', // navigation @@ -30,7 +34,6 @@ var Datepicker; nextHtml: '»', // events - // TODO сделать с множественными датами onChange: '' }; @@ -101,6 +104,10 @@ var Datepicker; }, _triggerOnChange: function (cellType) { + if (!this.selectedDates.length) { + return this.opts.onChange('', '', this); + } + var selectedDates = this.selectedDates, parsedSelected = Datepicker.getParsedDate(selectedDates[0]), formattedDates = this.formatDate(this.opts.dateFormat, selectedDates[0]), @@ -188,6 +195,19 @@ var Datepicker; this.views[this.currentView]._render() }, + removeDate: function (date) { + var selected = this.selectedDates, + _this = this; + + return selected.some(function (curDate, i) { + if (Datepicker.isSame(curDate, date)) { + selected.splice(i, 1); + _this.views[_this.currentView]._render(); + return true + } + }) + }, + _isSelected: function (checkDate, cellType) { return this.selectedDates.some(function (date) { return Datepicker.isSame(date, checkDate, cellType) diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss index ae811a1..ea23475 100644 --- a/sass/datepicker/_cell.scss +++ b/sass/datepicker/_cell.scss @@ -43,7 +43,7 @@ // ------------------------------------------------- .datepicker--cell-day { - &.-another-month- { + &.-other-month- { color: $colorAnotherMonth; } }