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

我想为我的项目使用jQuery-ui datepicker，但我需要能够拥有多个不相交的有效日期范围。 不在这些范围之一的日期不应该是可选择的。

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

我将如何实现这一目标？ 我很感激任何帮助。

Answer 1

您可以使用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[i].start && date <= ranges[i].end) return [true, '']; } return [false, '']; }, minDate: ranges[0].start, maxDate: ranges[ranges.length -1].end }); });​ 

你可以在这里尝试这个版本 ，只需按时间顺序排列范围:)