jingrow/air-datepicker
1
0
Fork 0
mirror of https://github.com/frappe/air-datepicker.git synced 2026-01-14 11:01:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

add disableNavWhenOutOfRange option

Browse Source
This commit is contained in:
t1m0n 2015-11-03 12:08:28 +03:00
parent ac949532ab
commit 4fcf1700bb
7 changed files with 113 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/datepicker.css vendored
View File

@ -44,6 +44,8 @@
width: 32px; }
.datepicker--nav-action:hover {
background: #eee; }
.datepicker--nav-action.-disabled- {
visibility: hidden; }
.datepicker--nav-title {
align-self: center;

56
dist/js/datepicker.js vendored
View File

@ -26,8 +26,7 @@ var Datepicker;
minDate: '',
maxDate: '',
//TODO сделать реакцию навигации на минимальную и максимальную даты
disableNavWhenOutOfRange: '',
disableNavWhenOutOfRange: true,
//TODO возможно добавить огрнаичивать число выделяемых дат
multipleDates: false,
@ -38,6 +37,7 @@ var Datepicker;
nextHtml: '»',
// events
//TODO сделать обратный вызов
onChange: ''
};
@ -234,7 +234,7 @@ var Datepicker;
* Check if date is between minDate and maxDate
* @param date {object} - date object
* @param type {string} - cell type
* @returns {*}
* @returns {boolean}
* @private
*/
_isInRange: function (date, type) {
@ -411,6 +411,7 @@ var Datepicker;
html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html);
this.setNavStatus();
},
_getTitle: function (date) {
@ -439,7 +440,52 @@ var Datepicker;
}
this.d.view = 'years';
},
setNavStatus: function () {
if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
var date = this.d.parsedDate,
m = date.month,
y = date.year,
d = date.date;
switch (this.d.view) {
case 'days':
if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next')
}
break;
case 'months':
if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
this._disableNav('next')
}
break;
case 'years':
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next')
}
break;
}
},
_disableNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
},
_activateNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
}
}
})();
@ -685,13 +731,17 @@ Datepicker.Cell = function () {
var month = el.data('month'),
d = this.d.parsedDate;
this.d.silent = true;
this.d.date = new Date(d.year, month, 1);
this.d.silent = false;
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.silent = true;
this.d.date = new Date(year, 0, 1);
this.d.silent = false;
this.d.view = 'months';
}
},

1
index.html
View File

@ -16,6 +16,7 @@
<script type="text/javascript" src="dist/js/datepicker.js"></script>
<script type="text/javascript">
$('.calendar').datepicker({
maxDate: new Date(2016, 0, 10),
onChange: function (dateString, date, inst) {
console.log(dateString);
}

4
js/datepicker/body.js
View File

@ -236,13 +236,17 @@
var month = el.data('month'),
d = this.d.parsedDate;
this.d.silent = true;
this.d.date = new Date(d.year, month, 1);
this.d.silent = false;
this.d.view = 'days';
},
years: function (el) {
var year = el.data('year');
this.d.silent = true;
this.d.date = new Date(year, 0, 1);
this.d.silent = false;
this.d.view = 'months';
}
},

6
js/datepicker/datepicker.js
View File

@ -26,8 +26,7 @@ var Datepicker;
minDate: '',
maxDate: '',
//TODO сделать реакцию навигации на минимальную и максимальную даты
disableNavWhenOutOfRange: '',
disableNavWhenOutOfRange: true,
//TODO возможно добавить огрнаичивать число выделяемых дат
multipleDates: false,
@ -38,6 +37,7 @@ var Datepicker;
nextHtml: '&raquo;',
// events
//TODO сделать обратный вызов
onChange: ''
};
@ -234,7 +234,7 @@ var Datepicker;
* Check if date is between minDate and maxDate
* @param date {object} - date object
* @param type {string} - cell type
* @returns {*}
* @returns {boolean}
* @private
*/
_isInRange: function (date, type) {

46
js/datepicker/navigation.js
View File

@ -32,6 +32,7 @@
html = Datepicker.template(template, $.extend({title: title}, this.opts));
this.d.$nav.html(html);
this.setNavStatus();
},
_getTitle: function (date) {
@ -60,7 +61,52 @@
}
this.d.view = 'years';
},
setNavStatus: function () {
if (!(this.opts.minDate || this.opts.maxDate) || !this.opts.disableNavWhenOutOfRange) return;
var date = this.d.parsedDate,
m = date.month,
y = date.year,
d = date.date;
switch (this.d.view) {
case 'days':
if (!this.d._isInRange(new Date(y, m-1, d), 'month')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y, m+1, d), 'month')) {
this._disableNav('next')
}
break;
case 'months':
if (!this.d._isInRange(new Date(y-1, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+1, m, d), 'year')) {
this._disableNav('next')
}
break;
case 'years':
if (!this.d._isInRange(new Date(y-10, m, d), 'year')) {
this._disableNav('prev')
}
if (!this.d._isInRange(new Date(y+10, m, d), 'year')) {
this._disableNav('next')
}
break;
}
},
_disableNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).addClass('-disabled-')
},
_activateNav: function (nav) {
$('[data-action="' + nav + '"]', this.d.$nav).removeClass('-disabled-')
}
}
})();

4
sass/datepicker/_navigation.scss
View File

@ -25,6 +25,10 @@
&:hover {
background: $colorCellHover;
}
&.-disabled- {
visibility: hidden;
}
}
.datepicker--nav-title {