我想为我的项目使用jQuery-ui datepicker,但我需要能够拥有多个不相交的有效日期范围.不在这些范围之一的日期不应该是可选择的.
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 1,minDate: new Date(2010,8,1),//range 1
maxDate: new Date(2010,20) //range 1
minDate: new Date(2010,9,//range 2
maxDate: new Date(2010,20) //range 2
});
});
我将如何实现这一目标？我很感激任何帮助.
解决方法
显示月份时可以使用
beforeShowDay来限制范围,如下所示：
var d1s = new Date(2010,d1e = new Date(2010,20),d2s = new Date(2010,d2e = new Date(2010,20);
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 1,beforeShowDay: function(date) {
return [(date >= d1s && date <= d1e || date >= d2s && date <= d2e),''];
},minDate: d1s,maxDate: d2e
});
});
或者,对于任意数量的日期范围,这是一种效率稍低但更灵活的方法：
var ranges = [ { start: new Date(2010,end: new Date(2010,20) },{ start: new Date(2010,10,20) } ];
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 1,beforeShowDay: function(date) {
for(var i=0; i<ranges.length; i++) {
if(date >= ranges[i].start && date <= ranges[i].end) return [true,''];
}
return [false,minDate: ranges[0].start,maxDate: ranges[ranges.length -1].end
});
});
You can give this version a try here,按时间顺序排列范围:)
