原本是选择起始日期后要再选择结束日期。
功能改成，左边日历选择起始日期，右边日历选择结束日期。
showdaterangepicker2.gif
Demo的js代码：
$('#demo').daterangepicker({
startDate: moment().subtract(6, 'days'),
endDate: moment(),
"opens": "left",
"linkedCalendars": false,
"locale": {
format: 'YYYY-MM-DD',
separator: ' ~ '
},
ranges: {
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, function(start, end, label) {
console.log(this.startDate.format(this.locale.format));
console.log(this.endDate.format(this.locale.format));
});
修改daterangepicker.js的代码：
1、修改在1200行的 hoverDate函数，注释五行代码，新增十行代码：
hoverDate: function(e) {
//ignore mouse movements while an above-calendar text input has focus
//if (this.container.find('input[name=daterangepicker_start]').is(":focus") || this.container.find('input[name=daterangepicker_end]').is(":focus"))
// return;
//ignore dates that can't be selected
if (!$(e.target).hasClass('available')) return;
//have the text inputs above calendars reflect the date being hovered over
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];
//注释下面五行*******************************************
// if (this.endDate && !this.container.find('input[name=daterangepicker_start]').is(":focus")) {
// this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format));
// } else if (!this.endDate && !this.container.find('input[name=daterangepicker_end]').is(":focus")) {
// this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format));
// }
//highlight the dates between the start date and the date being hovered as a potential end date
var leftCalendar = this.leftCalendar;
var rightCalendar = this.rightCalendar;
var startDate = this.startDate;
if (!this.endDate) {
this.container.find('.calendar tbody td').each(function(index, el) {
//skip week numbers, only look at dates
if ($(el).hasClass('week')) return;
var title = $(el).attr('data-title');
var row = title.substr(1, 1);
var col = title.substr(3, 1);
var cal = $(el).parents('.calendar');
var dt = cal.hasClass('left') ? leftCalendar.calendar[row][col] : rightCalendar.calendar[row][col];
if ((dt.isAfter(startDate) && dt.isBefore(date)) || dt.isSame(date, 'day')) {
$(el).addClass('in-range');
} else {
$(el).removeClass('in-range');
}
});
}
//新增下面十行，鼠标悬停在左边日历，就改变左边日历的输入框的样式*******************
var leri = cal.hasClass('left') ? "left" : "right";
if(leri == "left"){
this.container.find('input[name=daterangepicker_start]').val(date.format(this.locale.format));
this.container.find('input[name="daterangepicker_end"]').removeClass('active');
this.container.find('input[name="daterangepicker_start"]').addClass('active');
}else{
this.container.find('input[name=daterangepicker_end]').val(date.format(this.locale.format));
this.container.find('input[name="daterangepicker_start"]').removeClass('active');
this.container.find('input[name="daterangepicker_end"]').addClass('active');
}
},
2、修改在1300行的 clickDate函数，注释两行代码，新增十二行代码：
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 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 one of the inputs above the calendars was focused, cancel that manual input
//
if (this.endDate || date.isBefore(this.startDate, 'day')) { //picking start
if (this.timePicker) {
var hour = parseInt(this.container.find('.left .hourselect').val(), 10);
if (!this.timePicker24Hour) {
var ampm = this.container.find('.left .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());
//新增十二行，鼠标点击了左边日历，就改变起始日期********************************
var cal = $(e.target).parents('.calendar');
var leri = cal.hasClass('left') ? "left" : "right";
if(leri == "left"){
if(date.isAfter(this.endDate, 'day')){
this.setStartDate(date.clone());
this.setEndDate(date.clone());
}else{
this.setStartDate(date.clone());
}
}else{
this.setEndDate(date.clone());
}
} else if (!this.endDate && date.isBefore(this.startDate)) {
//special case: clicking the same date for start/end,
//but the time of the end date is before the start date
this.setEndDate(this.startDate.clone());
} else { // picking end
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.calculateChosenLabel();
this.clickApply();
}
}
if (this.singleDatePicker) {
this.setEndDate(this.startDate);
if (!this.timePicker)
this.clickApply();
}
this.updateView();
//This is to cancel the blur event handler if the mouse was in one of the inputs
e.stopPropagation();
},
3、修改在500行的 updateView函数，注释七行代码：
updateView: function() {
if (this.timePicker) {
this.renderTimePicker('left');
this.renderTimePicker('right');
if (!this.endDate) {
this.container.find('.right .calendar-time select').attr('disabled', 'disabled').addClass('disabled');
} else {
this.container.find('.right .calendar-time select').removeAttr('disabled').removeClass('disabled');
}
}
//注释下面七行，因为点击右边日历时，左边日历的输入框会闪一下，去掉***********************
// if (this.endDate) {
// this.container.find('input[name="daterangepicker_end"]').removeClass('active');
// this.container.find('input[name="daterangepicker_start"]').addClass('active');
// } else {
// this.container.find('input[name="daterangepicker_end"]').addClass('active');
// this.container.find('input[name="daterangepicker_start"]').removeClass('active');
// }
this.updateMonthsInView();
this.updateCalendars();
this.updateFormInputs();
},
