From ac949532ab73cac85916d10294d21a51af1d503a Mon Sep 17 00:00:00 2001 From: t1m0n Date: Mon, 2 Nov 2015 14:37:46 +0300 Subject: [PATCH] add minDate and maxDate --- dist/css/datepicker.css | 1 + dist/js/datepicker.js | 42 ++++++++++++++++++++++++++++++++++++- js/datepicker/body.js | 3 +++ js/datepicker/datepicker.js | 39 +++++++++++++++++++++++++++++++++- sass/datepicker/_cell.scss | 1 + 5 files changed, 84 insertions(+), 2 deletions(-) diff --git a/dist/css/datepicker.css b/dist/css/datepicker.css index 3501c8e..83d15bb 100644 --- a/dist/css/datepicker.css +++ b/dist/css/datepicker.css @@ -78,6 +78,7 @@ background: rgba(96, 196, 245, 0.05); } .datepicker--cell.-disabled- { cursor: default; + color: #ddd; background: none; } .datepicker--cell.-selected- { color: #fff; diff --git a/dist/js/datepicker.js b/dist/js/datepicker.js index 5748216..b16bf5a 100644 --- a/dist/js/datepicker.js +++ b/dist/js/datepicker.js @@ -24,9 +24,10 @@ var Datepicker; selectOtherMonths: true, moveToOtherMonthsOnSelect: true, - //TODO сделать минимальные, максимальные даты minDate: '', maxDate: '', + //TODO сделать реакцию навигации на минимальную и максимальную даты + disableNavWhenOutOfRange: '', //TODO возможно добавить огрнаичивать число выделяемых дат multipleDates: false, @@ -60,8 +61,11 @@ var Datepicker; this.inited = false; this.silent = false; // Need to prevent unnecessary rendering + this.currentDate = this.opts.start; this.currentView = this.opts.defaultView; + this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000); + this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000); this.selectedDates = []; this.views = {}; @@ -226,6 +230,28 @@ var Datepicker; }) }, + /** + * Check if date is between minDate and maxDate + * @param date {object} - date object + * @param type {string} - cell type + * @returns {*} + * @private + */ + _isInRange: function (date, type) { + var time = date.getTime(), + d = Datepicker.getParsedDate(date), + min = Datepicker.getParsedDate(this.minDate), + max = Datepicker.getParsedDate(this.maxDate), + dMinTime = new Date(d.year, d.month, min.date).getTime(), + dMaxTime = new Date(d.year, d.month, max.date).getTime(), + types = { + day: time >= this.minTime && time <= this.maxTime, + month: dMinTime >= this.minTime && dMaxTime <= this.maxTime, + year: d.year >= min.year && d.year <= max.year + }; + return type ? types[type] : types.day + }, + get parsedDate() { return Datepicker.getParsedDate(this.date); }, @@ -266,6 +292,17 @@ var Datepicker; get view() { return this.currentView; + }, + + get minTime() { + // Reset hours to 00:00, in case of new Date() is passed as option to minDate + var min = Datepicker.getParsedDate(this.minDate); + return new Date(min.year, min.month, min.date).getTime() + }, + + get maxTime() { + var max = Datepicker.getParsedDate(this.maxDate); + return new Date(max.year, max.month, max.date).getTime() } }; @@ -506,6 +543,7 @@ Datepicker.Cell = function () { if (this.d.isWeekend(d.day)) _class += " -weekend-"; if (Datepicker.isSame(currentDate, date)) _class += ' -current-'; if (this.d._isSelected(date, 'day')) _class += ' -selected-'; + if (!this.d._isInRange(date)) _class += ' -disabled-'; if (d.month != this.d.parsedDate.month) { _class += " -other-month-"; @@ -548,6 +586,7 @@ Datepicker.Cell = function () { loc = this.d.loc; if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-'; + if (!this.d._isInRange(date, 'month')) _class += ' -disabled-'; return '
' + loc.months[d.month] + '
' }, @@ -577,6 +616,7 @@ Datepicker.Cell = function () { } if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-'; + if (!this.d._isInRange(date, 'year')) _class += ' -disabled-'; return '
' + d.year + '
' }, diff --git a/js/datepicker/body.js b/js/datepicker/body.js index 6507ed1..1f9a69d 100644 --- a/js/datepicker/body.js +++ b/js/datepicker/body.js @@ -94,6 +94,7 @@ if (this.d.isWeekend(d.day)) _class += " -weekend-"; if (Datepicker.isSame(currentDate, date)) _class += ' -current-'; if (this.d._isSelected(date, 'day')) _class += ' -selected-'; + if (!this.d._isInRange(date)) _class += ' -disabled-'; if (d.month != this.d.parsedDate.month) { _class += " -other-month-"; @@ -136,6 +137,7 @@ loc = this.d.loc; if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-'; + if (!this.d._isInRange(date, 'month')) _class += ' -disabled-'; return '
' + loc.months[d.month] + '
' }, @@ -165,6 +167,7 @@ } if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-'; + if (!this.d._isInRange(date, 'year')) _class += ' -disabled-'; return '
' + d.year + '
' }, diff --git a/js/datepicker/datepicker.js b/js/datepicker/datepicker.js index bbf3110..1169854 100644 --- a/js/datepicker/datepicker.js +++ b/js/datepicker/datepicker.js @@ -24,9 +24,10 @@ var Datepicker; selectOtherMonths: true, moveToOtherMonthsOnSelect: true, - //TODO сделать минимальные, максимальные даты minDate: '', maxDate: '', + //TODO сделать реакцию навигации на минимальную и максимальную даты + disableNavWhenOutOfRange: '', //TODO возможно добавить огрнаичивать число выделяемых дат multipleDates: false, @@ -60,8 +61,11 @@ var Datepicker; this.inited = false; this.silent = false; // Need to prevent unnecessary rendering + this.currentDate = this.opts.start; this.currentView = this.opts.defaultView; + this.minDate = this.opts.minDate ? this.opts.minDate : new Date(-8639999913600000); + this.maxDate = this.opts.maxDate ? this.opts.maxDate : new Date(8639999913600000); this.selectedDates = []; this.views = {}; @@ -226,6 +230,28 @@ var Datepicker; }) }, + /** + * Check if date is between minDate and maxDate + * @param date {object} - date object + * @param type {string} - cell type + * @returns {*} + * @private + */ + _isInRange: function (date, type) { + var time = date.getTime(), + d = Datepicker.getParsedDate(date), + min = Datepicker.getParsedDate(this.minDate), + max = Datepicker.getParsedDate(this.maxDate), + dMinTime = new Date(d.year, d.month, min.date).getTime(), + dMaxTime = new Date(d.year, d.month, max.date).getTime(), + types = { + day: time >= this.minTime && time <= this.maxTime, + month: dMinTime >= this.minTime && dMaxTime <= this.maxTime, + year: d.year >= min.year && d.year <= max.year + }; + return type ? types[type] : types.day + }, + get parsedDate() { return Datepicker.getParsedDate(this.date); }, @@ -266,6 +292,17 @@ var Datepicker; get view() { return this.currentView; + }, + + get minTime() { + // Reset hours to 00:00, in case of new Date() is passed as option to minDate + var min = Datepicker.getParsedDate(this.minDate); + return new Date(min.year, min.month, min.date).getTime() + }, + + get maxTime() { + var max = Datepicker.getParsedDate(this.maxDate); + return new Date(max.year, max.month, max.date).getTime() } }; diff --git a/sass/datepicker/_cell.scss b/sass/datepicker/_cell.scss index 0eaad0d..2782fe1 100644 --- a/sass/datepicker/_cell.scss +++ b/sass/datepicker/_cell.scss @@ -35,6 +35,7 @@ &.-disabled- { cursor: default; + color: $colorGrey; background: none; }