jQuery ui:日期选择器的多个范围? [英] jQuery ui: multiple ranges for date picker?

问题描述

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

I want to use the jQuery-ui datepicker for my project, but I need to be able to have multiple, disjoint ranges of valid dates. Dates not in one of these ranges shouldn't be selectable.

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

我将如何实施呢?我将不胜感激.

How would I go about implementing this? I'd appreciate any help.

推荐答案

您可以使用 以限制显示月份时的范围，例如:

You could use beforeShowDay to restrict the range when displaying months, like this:

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
  });
});​

您可以在此处尝试

或者，对于任意数量的日期范围，这是一种效率稍差但更灵活的方法:

Or, here's a slightly less efficient but more flexible approach for any number of date ranges:

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
  });
});​

您可以在此处尝试使用此版本，只需按时间顺序排列范围即可: )

You can give this version a try here, just put the ranges in chronological order :)

这篇关于jQuery ui:日期选择器的多个范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！