From 9323a0801934785f556785c8a7886b73869f1f9e Mon Sep 17 00:00:00 2001 From: t1m0n Date: Thu, 29 Oct 2015 11:36:20 +0300 Subject: [PATCH] add showOtherMonths, selectOtherMonths, moveToOtherMonthsOnSelect options --- dist/css/datepicker.css | 21 +++++++++--- dist/js/datepicker.js | 47 ++++++++++++++++++++------ js/datepicker/body.js | 27 +++++++++++---- js/datepicker/datepicker.js | 20 ++++++++--- sass/datepicker/_cell.scss | 25 +++++++++++++- sass/datepicker/_datepicker.scss | 1 - sass/datepicker/datepicker-config.scss | 2 +- 7 files changed, 116 insertions(+), 27 deletions(-) diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index fd076c3..3501c8e 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -8,8 +8,7 @@ width: 224px; } .datepicker--body { - display: none; - margin: -1px; } + display: none; } .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- { - color: #ddd; } +.datepicker--cell-day { + 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%; diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index b04f56e..5748216 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -9,6 +9,7 @@ var Datepicker; '
' + '', 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: '', - selectOtherMonths: '', + //TODO сделать тоже самое с годами + 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 '
' + date.getDate() + '
'; + if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) { + _class += " -disabled-"; + } + + if (!this.opts.showOtherMonths) html = ''; + } + + return '
' + html + '
'; }, /** @@ -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, - selectedDate = new Date(d.year, month, date), + year = el.data('year'), + selectedDate = new Date(year, month, date), alreadySelected = this.d._isSelected(selectedDate, 'day'), triggerOnChange = true; diff --git a/js/datepicker/body.js b/js/datepicker/body.js index c45b69a..6507ed1 100644 --- a/js/datepicker/body.js +++ b/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 '
' + date.getDate() + '
'; + if (!this.opts.selectOtherMonths || !this.opts.showOtherMonths) { + _class += " -disabled-"; + } + + if (!this.opts.showOtherMonths) html = ''; + } + + return '
' + html + '
'; }, /** @@ -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, - selectedDate = new Date(d.year, month, date), + year = el.data('year'), + selectedDate = new Date(year, month, date), alreadySelected = this.d._isSelected(selectedDate, 'day'), triggerOnChange = true; diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js index f01814b..bbf3110 100644 --- a/js/datepicker/datepicker.js +++ b/js/datepicker/datepicker.js @@ -9,6 +9,7 @@ var Datepicker; '
' + '', 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: '', - selectOtherMonths: '', + //TODO сделать тоже самое с годами + 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(); } diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss index ea23475..0eaad0d 100644 --- a/sass/datepicker/_cell.scss +++ b/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; + } + + } } } diff --git a/sass/datepicker/_datepicker.scss b/sass/datepicker/_datepicker.scss index 89f517a..5a9f079 100644 --- a/sass/datepicker/_datepicker.scss +++ b/sass/datepicker/_datepicker.scss @@ -16,7 +16,6 @@ .datepicker--body { display: none; - margin: -1px; &.active { display: block; diff --git a/sass/datepicker/datepicker-config.scss b/sass/datepicker/datepicker-config.scss index 3c8cb72..ea59101 100644 --- a/sass/datepicker/datepicker-config.scss +++ b/sass/datepicker/datepicker-config.scss @@ -12,5 +12,5 @@ $colorGrey: #ddd; $colorAnotherMonth: #ddd; $colorCellHover: #eee; $colorCellCurrent: #60C4F5; -$colorCellSelected: ''; +$colorCellSelected: skyblue; $colorCellWeekend: ''; \ No newline at end of file