daterangepicker 清空_修改Daterangepicker双日历选择日期的功能

原本是选择起始日期后要再选择结束日期。

功能改成，左边日历选择起始日期，右边日历选择结束日期。

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();

},