好的，因为我不想切换到不同的日期范围选择器，所以我决定坚持使用这个，但改变它的 clickDate 行为。我用于clickDate 的代码是这样的，它对它如何设置开始和结束日期进行了注释。注意注释掉的原始行为，然后是指示新行为的新块。还要注意在此之后，为if (this.singleDatePicker) 块添加的else 条件：
clickDate: function(e) {
if (!$(e.target).hasClass('available')) return;
var title = $(e.target).attr('data-title');
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = $(e.target).parents('.calendar');
var date = cal.hasClass('left') ? this.leftCalendar.calendar[row][col] : this.rightCalendar.calendar[row][col];
// This was the original behaviour which I replaced below.
//
// this function needs to do a few things:
// * alternate between selecting a start and end date for the range,
// * if the time picker is enabled, apply the hour/minute/second from the select boxes to the clicked date
// * if autoapply is enabled, and an end date was chosen, apply the selection
// * if single date picker mode, and time picker isn't enabled, apply the selection immediately
//
// if (this.endDate || date.isBefore(this.startDate)) {
// if (this.timePicker) {
// var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
// if (!this.timePicker24Hour) {
// var ampm = cal.find('.ampmselect').val();
// if (ampm === 'PM' && hour < 12)
// hour += 12;
// if (ampm === 'AM' && hour === 12)
// hour = 0;
// }
// var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
// var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
// date = date.clone().hour(hour).minute(minute).second(second);
// }
// this.endDate = null;
// this.setStartDate(date.clone());
// } else {
// if (this.timePicker) {
// var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
// if (!this.timePicker24Hour) {
// var ampm = this.container.find('.right .ampmselect').val();
// if (ampm === 'PM' && hour < 12)
// hour += 12;
// if (ampm === 'AM' && hour === 12)
// hour = 0;
// }
// var minute = parseInt(this.container.find('.right .minuteselect').val(), 10);
// var second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0;
// date = date.clone().hour(hour).minute(minute).second(second);
// }
// this.setEndDate(date.clone());
// if (this.autoApply)
// this.clickApply();
// }
// Change the behaviour as follows:
// - If the first date selected, assign it to the start date.
// - When the second date is selected, check if it is later than (or equal to) the first date (which is currently the start date).
// If the second date is later than (or is equal to) the first date, then make it the end date.
// If the second date is earlier than the first date, make the first date the end date, and make the second date the start date.
// - If auto-apply is off, and another date is selected, then treat it as the first date go back to rule #1.
if (this.startDate && !this.endDate) {
if (date.isSame(this.startDate) || date.isAfter(this.startDate)) {
if (this.timePicker) {
var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
if (!this.timePicker24Hour) {
var ampm = cal.find('.ampmselect').val();
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
date = date.clone().hour(hour).minute(minute).second(second);
}
this.setEndDate(date.clone());
}
else {
if (this.timePicker) {
var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
if (!this.timePicker24Hour) {
var ampm = cal.find('.ampmselect').val();
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.container.find('.left .minuteselect').val(), 10);
var second = this.timePickerSeconds ? parseInt(this.container.find('.left .secondselect').val(), 10) : 0;
date = date.clone().hour(hour).minute(minute).second(second);
}
this.endDate = this.startDate.clone();
this.setStartDate(date.clone());
}
}
else {
if (this.timePicker) {
var hour = parseInt(this.container.find('.right .hourselect').val(), 10);
if (!this.timePicker24Hour) {
var ampm = this.container.find('.right .ampmselect').val();
if (ampm === 'PM' && hour < 12)
hour += 12;
if (ampm === 'AM' && hour === 12)
hour = 0;
}
var minute = parseInt(this.container.find('.right .minuteselect').val(), 10);
var second = this.timePickerSeconds ? parseInt(this.container.find('.right .secondselect').val(), 10) : 0;
date = date.clone().hour(hour).minute(minute).second(second);
}
this.setStartDate(date.clone());
this.endDate = null;
}
if (this.singleDatePicker) {
this.setEndDate(this.startDate);
if (!this.timePicker)
this.clickApply();
}
// I also added this else condition:
// If a date range picker, and both dates are selected, and it is auto-apply, trigger clickApply.
else if (this.autoApply && !this.timePicker && this.startDate && this.endDate && !this.startDate.isSame(this.endDate)) {
this.clickApply();
}
this.updateView();
},
我还完全注释掉了 hoverDate 函数，因为我发现当我悬停日历时输入字段值正在发生变化，这令人困惑。但这是我个人的喜好。
更新
如果你想看看我做了什么，你可以在 GitHub here 上查看。