mirror of
https://github.com/frappe/air-datepicker.git
synced 2026-01-14 11:01:22 +08:00
add selectDate() method
This commit is contained in:
t1m0n
parent
a364079130
commit
8b65c88c82
6
dist/css/datepicker.css
vendored
6
dist/css/datepicker.css
vendored
@ -74,10 +74,12 @@
|
||||
.datepicker--cell:hover {
|
||||
background: #eee; }
|
||||
.datepicker--cell.-current- {
|
||||
color: #60C4F5;
|
||||
border: 1px solid #60C4F5; }
|
||||
color: #60C4F5; }
|
||||
.datepicker--cell.-current-:hover {
|
||||
background: rgba(96, 196, 245, 0.05); }
|
||||
.datepicker--cell.-selected- {
|
||||
color: #fff;
|
||||
background: skyblue; }
|
||||
|
||||
.datepicker--cell-day.-another-month- {
|
||||
color: #ddd; }
|
||||
|
||||
61
dist/js/datepicker.js
vendored
61
dist/js/datepicker.js
vendored
@ -17,6 +17,13 @@ var Datepicker;
|
||||
defaultView: 'days',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
|
||||
//TODO сделать минимальные, максимальные даты
|
||||
minDate: '',
|
||||
maxData: '',
|
||||
|
||||
//TODO сделать множественные даты
|
||||
multipleDates: false,
|
||||
|
||||
// navigation
|
||||
prevHtml: '«',
|
||||
nextHtml: '»',
|
||||
@ -47,7 +54,7 @@ var Datepicker;
|
||||
|
||||
this.currentDate = this.opts.start;
|
||||
this.currentView = this.opts.defaultView;
|
||||
this.selectedDate = [];
|
||||
this.selectedDates = [];
|
||||
this.views = {};
|
||||
|
||||
this.init()
|
||||
@ -151,6 +158,16 @@ var Datepicker;
|
||||
return result;
|
||||
},
|
||||
|
||||
selectDate: function (date) {
|
||||
if (this.opts.multipleDates) {
|
||||
// validate, push
|
||||
} else {
|
||||
this.selectedDates = [date];
|
||||
}
|
||||
|
||||
this.views[this.currentView]._render()
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
},
|
||||
@ -223,6 +240,20 @@ var Datepicker;
|
||||
});
|
||||
};
|
||||
|
||||
Datepicker.isSame = function (date1, date2, type) {
|
||||
var d1 = Datepicker.getParsedDate(date1),
|
||||
d2 = Datepicker.getParsedDate(date2),
|
||||
_type = type ? type : 'day',
|
||||
|
||||
conditions = {
|
||||
day: d1.date == d2.date && d1.month == d2.month && d1.year == d2.year,
|
||||
month: d1.month == d2.month && d1.year == d2.year,
|
||||
year: d1.year == d2.year
|
||||
};
|
||||
|
||||
return conditions[_type];
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
if (Datepicker.prototype[options]) {
|
||||
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
@ -414,9 +445,8 @@ Datepicker.Cell = function () {
|
||||
|
||||
if (this.d.isWeekend(d.day)) _class += " -weekend-";
|
||||
if (d.month != this.d.parsedDate.month) _class += " -another-month-";
|
||||
if (d.date == currentDate.getDate() &&
|
||||
d.month == currentDate.getMonth() &&
|
||||
d.year == currentDate.getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
|
||||
if (this._isSelected(date, 'day')) _class += ' -selected-';
|
||||
|
||||
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
|
||||
},
|
||||
@ -446,7 +476,7 @@ Datepicker.Cell = function () {
|
||||
currentDate = new Date(),
|
||||
loc = this.d.loc;
|
||||
|
||||
if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
|
||||
|
||||
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
|
||||
},
|
||||
@ -468,13 +498,14 @@ Datepicker.Cell = function () {
|
||||
_getYearHtml: function (date) {
|
||||
var _class = "datepicker--cell datepicker--cell-year",
|
||||
decade = Datepicker.getDecade(this.d.date),
|
||||
currentDate = new Date(),
|
||||
d = Datepicker.getParsedDate(date);
|
||||
|
||||
if (d.year < decade[0] || d.year > decade[1]) {
|
||||
_class += ' -another-decade-';
|
||||
}
|
||||
|
||||
if (d.year == new Date().getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
|
||||
|
||||
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
|
||||
},
|
||||
@ -503,6 +534,23 @@ Datepicker.Cell = function () {
|
||||
this._renderTypes[this.type].bind(this)()
|
||||
},
|
||||
|
||||
_isSelected: function (cellDate, cellType) {
|
||||
var selectedDates = this.d.selectedDates,
|
||||
len = selectedDates.length,
|
||||
result;
|
||||
|
||||
if (!len) return false;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
if (Datepicker.isSame(selectedDates[i], cellDate, cellType)) {
|
||||
result = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
@ -522,6 +570,7 @@ Datepicker.Cell = function () {
|
||||
d = this.d.parsedDate;
|
||||
|
||||
this.d.date = new Date(d.year, d.month, date);
|
||||
this.d.selectDate(this.d.date);
|
||||
|
||||
if (this.d.opts.onChange) {
|
||||
this.d._triggerOnChange()
|
||||
|
||||
@ -91,9 +91,8 @@
|
||||
|
||||
if (this.d.isWeekend(d.day)) _class += " -weekend-";
|
||||
if (d.month != this.d.parsedDate.month) _class += " -another-month-";
|
||||
if (d.date == currentDate.getDate() &&
|
||||
d.month == currentDate.getMonth() &&
|
||||
d.year == currentDate.getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date)) _class += ' -current-';
|
||||
if (this._isSelected(date, 'day')) _class += ' -selected-';
|
||||
|
||||
return '<div class="' + _class + '" data-date="' + date.getDate() + '">' + date.getDate() + '</div>';
|
||||
},
|
||||
@ -123,7 +122,7 @@
|
||||
currentDate = new Date(),
|
||||
loc = this.d.loc;
|
||||
|
||||
if (d.month == currentDate.getMonth() && d.year == currentDate.getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date, 'month')) _class += ' -current-';
|
||||
|
||||
return '<div class="' + _class + '" data-month="' + d.month + '">' + loc.months[d.month] + '</div>'
|
||||
},
|
||||
@ -145,13 +144,14 @@
|
||||
_getYearHtml: function (date) {
|
||||
var _class = "datepicker--cell datepicker--cell-year",
|
||||
decade = Datepicker.getDecade(this.d.date),
|
||||
currentDate = new Date(),
|
||||
d = Datepicker.getParsedDate(date);
|
||||
|
||||
if (d.year < decade[0] || d.year > decade[1]) {
|
||||
_class += ' -another-decade-';
|
||||
}
|
||||
|
||||
if (d.year == new Date().getFullYear()) _class += ' -current-';
|
||||
if (Datepicker.isSame(currentDate, date, 'year')) _class += ' -current-';
|
||||
|
||||
return '<div class="' + _class + '" data-year="' + d.year + '">' + d.year + '</div>'
|
||||
},
|
||||
@ -180,6 +180,23 @@
|
||||
this._renderTypes[this.type].bind(this)()
|
||||
},
|
||||
|
||||
_isSelected: function (cellDate, cellType) {
|
||||
var selectedDates = this.d.selectedDates,
|
||||
len = selectedDates.length,
|
||||
result;
|
||||
|
||||
if (!len) return false;
|
||||
|
||||
for (var i = 0; i < len; i++) {
|
||||
if (Datepicker.isSame(selectedDates[i], cellDate, cellType)) {
|
||||
result = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return result;
|
||||
},
|
||||
|
||||
show: function () {
|
||||
this.$el.addClass('active');
|
||||
this.acitve = true;
|
||||
@ -199,6 +216,7 @@
|
||||
d = this.d.parsedDate;
|
||||
|
||||
this.d.date = new Date(d.year, d.month, date);
|
||||
this.d.selectDate(this.d.date);
|
||||
|
||||
if (this.d.opts.onChange) {
|
||||
this.d._triggerOnChange()
|
||||
|
||||
@ -17,6 +17,13 @@ var Datepicker;
|
||||
defaultView: 'days',
|
||||
dateFormat: 'dd.mm.yyyy',
|
||||
|
||||
//TODO сделать минимальные, максимальные даты
|
||||
minDate: '',
|
||||
maxData: '',
|
||||
|
||||
//TODO сделать множественные даты
|
||||
multipleDates: false,
|
||||
|
||||
// navigation
|
||||
prevHtml: '«',
|
||||
nextHtml: '»',
|
||||
@ -47,7 +54,7 @@ var Datepicker;
|
||||
|
||||
this.currentDate = this.opts.start;
|
||||
this.currentView = this.opts.defaultView;
|
||||
this.selectedDate = [];
|
||||
this.selectedDates = [];
|
||||
this.views = {};
|
||||
|
||||
this.init()
|
||||
@ -151,6 +158,16 @@ var Datepicker;
|
||||
return result;
|
||||
},
|
||||
|
||||
selectDate: function (date) {
|
||||
if (this.opts.multipleDates) {
|
||||
// validate, push
|
||||
} else {
|
||||
this.selectedDates = [date];
|
||||
}
|
||||
|
||||
this.views[this.currentView]._render()
|
||||
},
|
||||
|
||||
get parsedDate() {
|
||||
return Datepicker.getParsedDate(this.date);
|
||||
},
|
||||
@ -223,6 +240,20 @@ var Datepicker;
|
||||
});
|
||||
};
|
||||
|
||||
Datepicker.isSame = function (date1, date2, type) {
|
||||
var d1 = Datepicker.getParsedDate(date1),
|
||||
d2 = Datepicker.getParsedDate(date2),
|
||||
_type = type ? type : 'day',
|
||||
|
||||
conditions = {
|
||||
day: d1.date == d2.date && d1.month == d2.month && d1.year == d2.year,
|
||||
month: d1.month == d2.month && d1.year == d2.year,
|
||||
year: d1.year == d2.year
|
||||
};
|
||||
|
||||
return conditions[_type];
|
||||
};
|
||||
|
||||
$.fn[pluginName] = function ( options ) {
|
||||
if (Datepicker.prototype[options]) {
|
||||
Datepicker.prototype[options].apply(this.data(pluginName), Array.prototype.slice.call(arguments, 1));
|
||||
|
||||
@ -27,12 +27,16 @@
|
||||
|
||||
&.-current- {
|
||||
color: $colorCellCurrent;
|
||||
border: 1px solid $colorCellCurrent;
|
||||
|
||||
&:hover {
|
||||
background: rgba($colorCellCurrent, .05);
|
||||
}
|
||||
}
|
||||
|
||||
&.-selected- {
|
||||
color: #fff;
|
||||
background: skyblue;
|
||||
}
|
||||
}
|
||||
|
||||
// Day cell
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user