mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add minDate and maxDate
This commit is contained in:
t1m0n
parent
9323a08019
commit
ac949532ab
1
dist/css/datepicker.css
vendored
1
dist/css/datepicker.css
vendored
@ -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;
|
||||
|
||||
42
dist/js/datepicker.js
vendored
42
dist/js/datepicker.js
vendored
@ -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 '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
|
||||
},
|
||||
@ -577,6 +616,7 @@ Datepicker.Cell = function () {
|
||||
}
|
||||
|
||||
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
|
||||
if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
|
||||
|
||||
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
|
||||
},
|
||||
|
||||
@ -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 '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
|
||||
},
|
||||
@ -165,6 +167,7 @@
|
||||
}
|
||||
|
||||
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
|
||||
if (!this.d._isInRange(date, 'year')) _class += ' -disabled-';
|
||||
|
||||
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
|
||||
},
|
||||
|
||||
@ -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()
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -35,6 +35,7 @@
|
||||
|
||||
&.-disabled- {
|
||||
cursor: default;
|
||||
color: $colorGrey;
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user