是否有人知道如何更改bootstrap-daterangepicker允许用户选择自定义日期范围的方式？
目前，似乎认为首次点击的日期是＆＃39;来自＆＃39;日期和第二个是＆＃39; To＆＃39;日期。这样做的问题是，如果用户想要过去的日期范围，并决定先选择“To＆＃39;日期，因为它在可见日历上，然后浏览日历并选择＆＃39;来自＆＃39;日期。
我想更改它，以便无论何时首先选择日期，都会被视为＆＃39;来自＆＃39;日期。第二个日期设置为＆＃39; To＆＃39;日期，除非第二个日期更早，在这种情况下，它应该交换日期。
我知道用户可以简单地更正输入字段上的日期，但这会使日历UI无法使用。
我希望有人已经采取了类似的方法。如果没有，我可能不得不求助于创建此插件的版本。 （从代码来看，似乎是我需要关注的clickDate函数。）
答案 0 :(得分：0)
对不起我之前的回答，我在这里更新了我的代码。也许这会有所帮助。
答案 1 :(得分：0)
好吧，因为我不想切换到不同的日期范围选择器，所以我决定坚持使用这个但改变其clickDate行为。我用于clickDate的代码就是这个，它对如何设置开始日期和结束日期进行了评论。请注意注释掉的原始行为，然后是新块，它指示新行为。另请注意，此后else块的if (this.singleDatePicker)条件已添加：
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上查看。