jQuery UI：日期选择器的多个范围？

Question

jQuery UI：日期选择器的多个范围？

8

我想在我的项目中使用jQuery-ui日期选择器，但我需要能够有多个不连续的有效日期范围。不在这些范围内的日期不应该是可选的。

 $(function() {
 $("#datepicker").datepicker({
   numberOfMonths: 1,
   minDate: new Date(2010, 8, 1), //range 1
   maxDate: new Date(2010, 8, 20) //range 1
   minDate: new Date(2010, 9, 1), //range 2
   maxDate: new Date(2010, 9, 20) //range 2
 });
 });

我该如何实现这个功能？非常感谢你的帮助。

- James

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nick Craver · Accepted Answer

你可以使用beforeShowDay来限制显示月份的范围，像这样：

var d1s = new Date(2010, 8, 1),
    d1e = new Date(2010, 8, 20),
    d2s = new Date(2010, 9, 1),
    d2e = new Date(2010, 9, 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, 8, 1), end: new Date(2010, 8, 20) },
               { start: new Date(2010, 9, 1), end: new Date(2010, 9, 20) },
               { start: new Date(2010, 10, 1), end: 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
  });
});

你可以在这里试试这个版本，只需按照时间顺序放置范围 :)