jQuery ui: wiele zakresów do wyboru daty?

Question

Chcę użyć datepicker jQuery-ui dla mojego projektu, ale muszę mieć możliwość posiadania wielu, rozłącznych zakresów ważnych dat. Daty spoza jednego z tych zakresów nie powinny być możliwe do wybrania.

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

Co mam zrobić, aby to wdrożyć? Byłbym wdzięczny za każdą pomoc.

Answer 1

Można użyć beforeShowDay ograniczyć zakres podczas wyświetlania miesięcy, tak:

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

---

Albo, tutaj jest nieco mniej skuteczne, ale bardziej elastyczne podejście do dowolnej liczby daty zakresy:

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, po prostu umieść zakresy w porządku chronologicznym :)