我正在使用jQuery UI Datepicker，我想添加一些功能。
只需按住shift并选择一些日期并选择结束日期，然后保持移出高光日期，所以将日期字符串放入<input>，就是这样！
var input = $('input.date');
var date_val = input.val();
var dates = date_val ? date_val.split(',') : [];
var postDateShiftHeld = false;
var DateFrom;
var DateTo;
$(document).bind('keyup keydown', function (e) {
postDateShiftHeld = e.shiftKey
}).bind('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 16) {
if (DateFrom && DateTo) {
console.log(DateFrom + " -> " + DateTo);
} else {
DateFrom = false;
DateTo = false;
}
}
});
function add_date(date) {
if ($.inArray(date, dates) < 0) {
dates.push(date);
}
}
function remove_date(i) {
dates.splice(i, 1);
}
function check_date(date) {
var date = date.split("/");
var date = date[1] + "/" + date[0] + "/" + date[2];
var i = $.inArray(date, dates);
if (i >= 0) remove_date(i);
else add_date(date);
}
$("#datepicker").datepicker({
onSelect: function (date) {
if (postDateShiftHeld) {
if (!DateFrom) {
DateFrom = date;
} else {
DateTo = date;
}
return false;
}
check_date(date);
},
beforeShowDay: function (date) {
for (i = 0; i < dates.length; i++) {
var post_date = dates[i].split("/");
if (date.getDate() == post_date[0] && date.getMonth() == post_date[1] - 1 && date.getFullYear() == post_date[2]) {
return [true, "ui-state-active"];
}
}
input.val(dates + "");
return [true, ''];
}
});
我现在开始执行此步骤，并获得日期from和to，但我不知道如何在jQuery UI Datepicker中将日期from变为to < / p>
任何人都可以帮助我吗？我现在不知道:(
答案 0 :(得分：2)
我为你创建了一个DEMO，请点击这里http://jsfiddle.net/yeyene/FS6ms/
您可以通过2次点击选择from和to个日期，无需Shift键。
作者和教程页面...... http://benknowscode.wordpress.com/2012/11/20/selecting-ranges-with-the-jquery-ui-datepicker/
$.datepicker._defaults.onAfterUpdate = null;
var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function( inst ) {
datepicker__updateDatepicker.call( this, inst );
var onAfterUpdate = this._get(inst, 'onAfterUpdate');
if (onAfterUpdate)
onAfterUpdate.apply((inst.input ? inst.input[0] : null),
[(inst.input ? inst.input.val() : ''), inst]);
}
$(function() {
var cur = -1, prv = -1;
$('#jrange div')
.datepicker({
//numberOfMonths: 3,
changeMonth: true,
changeYear: true,
showButtonPanel: true,
beforeShowDay: function ( date ) {
return [true, ( (date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')];
},
onSelect: function ( dateText, inst ) {
var d1, d2;
prv = cur;
cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
if ( prv == -1 || prv == cur ) {
prv = cur;
$('#jrange input').val( dateText );
} else {
d1 = $.datepicker.formatDate( 'mm/dd/yy', new Date(Math.min(prv,cur)), {} );
d2 = $.datepicker.formatDate( 'mm/dd/yy', new Date(Math.max(prv,cur)), {} );
$('#jrange input').val( d1+' - '+d2 );
}
},
onChangeMonthYear: function ( year, month, inst ) {
//prv = cur = -1;
},
onAfterUpdate: function ( inst ) {
$('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
.appendTo($('#jrange div .ui-datepicker-buttonpane'))
.on('click', function () { $('#jrange div').hide(); });
}
})
.position({
my: 'left top',
at: 'left bottom',
of: $('#jrange input')
})
.hide();
$('#jrange input').on('focus', function (e) {
var v = this.value,
d;
try {
if ( v.indexOf(' - ') > -1 ) {
d = v.split(' - ');
prv = $.datepicker.parseDate( 'mm/dd/yy', d[0] ).getTime();
cur = $.datepicker.parseDate( 'mm/dd/yy', d[1] ).getTime();
} else if ( v.length > 0 ) {
prv = cur = $.datepicker.parseDate( 'mm/dd/yy', v ).getTime();
}
} catch ( e ) {
cur = prv = -1;
}
if ( cur > -1 )
$('#jrange div').datepicker('setDate', new Date(cur));
$('#jrange div').datepicker('refresh').show();
});
});
答案 1 :(得分：0)
我说完了：
var input = $('input.date');
var dates;
var ShiftHeld = false;
var DateFrom;
var DateTo;
$(document).bind('keyup keydown', function (e) {
ShiftHeld = e.shiftKey
}).bind('keyup', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 16 && DateFrom && DateTo) {
addMultipleDates(DateFrom, DateTo);
}
if (code === 16) {
DateFrom = false;
DateTo = false;
}
});
function add_date(date) {
if ($.inArray(date, dates) < 0) {
dates.push(date);
}
}
function remove_date(i) {
dates.splice(i, 1);
}
function check_date(date) {
var date = date.split("/");
var date = date[1] + "/" + date[0] + "/" + date[2];
var i = $.inArray(date, dates);
if (i >= 0) remove_date(i);
else add_date(date);
}
datepicker();
function datepicker() {
var dates_value = input.val();
dates = dates_value ? dates_value.split(',') : [];
$("#datepicker").datepicker({
onSelect: function (date) {
if(ShiftHeld) {
if (!DateFrom) {
DateFrom = date;
} else {
DateTo = date;
}
return false;
}
check_date(date);
},
beforeShowDay: function (date) {
for (i = 0; i < dates.length; i++) {
var post_date = dates[i].split("/");
if (date.getDate() == post_date[0] && date.getMonth() == post_date[1] - 1 && date.getFullYear() == post_date[2]) {
return [true, "ui-state-active"];
}
}
input.val(dates + "");
return [true, ''];
}
});
}
function addMultipleDates(a, b) {
var multi_dates = list_dates(a, b);
$.each(multi_dates, function (i, date) {
if ($.inArray(date, dates) < 0) {
var old_dates = input.val();
if (old_dates.length) {
input.val(old_dates + ',' + date);
} else {
input.val(date);
}
};
});
$("#datepicker").datepicker("destroy");
datepicker();
}
function list_dates(a, b) {
var list = [];
var a_date = new Date(a);
var b_date = new Date(b);
if (a_date > b_date) {
while (a_date >= b_date) {
var date_format = ('0' + b_date.getDate()).slice(-2) + '/' + ('0' + (b_date.getMonth() + 1)).slice(-2) + '/' + b_date.getFullYear();
list.push(date_format);
b_date = new Date(b_date.setDate(b_date.getDate() + 1));
}
} else if (a_date < b_date) {
while (b_date >= a_date) {
var date_format = ('0' + a_date.getDate()).slice(-2) + '/' + ('0' + (a_date.getMonth() + 1)).slice(-2) + '/' + a_date.getFullYear();
list.push(date_format);
a_date = new Date(a_date.setDate(a_date.getDate() + 1));
}
} else {
list.push(a);
}
return list;
}