jQuery ui: nhiều phạm vi cho bộ chọn ngày?

Question

Tôi muốn sử dụng trình ghi ngày tháng jQuery-ui cho dự án của mình, nhưng tôi cần có khả năng có nhiều dải phân tách ngày hợp lệ. Không được chọn ngày không thuộc một trong các phạm vi này.

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

Tôi sẽ thực hiện điều này như thế nào? Tôi đánh giá cao sự giúp đỡ nào.

Answer 1

Bạn có thể sử dụng beforeShowDay để hạn chế phạm vi khi hiển thị tháng, như thế này:

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

You can give it a try here

---

Hoặc, đây là một cách tiếp cận hơi kém hiệu quả nhưng linh hoạt hơn đối với bất kỳ số lượng ngày phạm vi:

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, chỉ cần đặt phạm vi theo thứ tự thời gian :)