jQuery UI: mehrere Bereiche für Datumsauswahl?

Question

Ich möchte den jQuery-ui Datepicker für mein Projekt verwenden, aber ich muss in der Lage sein, mehrere, disjunkte Bereiche gültiger Daten zu haben. Daten, die nicht in einem dieser Bereiche liegen, sollten nicht auswählbar sein.

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

Wie würde ich das umsetzen? Ich würde mich über jede Hilfe freuen.

Answer 1

Sie könnten beforeShowDay verwenden Sie den Bereich zu begrenzen, wenn Monate anzeigt, wie folgt aus:

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

---

Oder ist hier ein etwas weniger effizient, aber flexibleren Ansatz für eine beliebige Anzahl von Datum Bereiche:

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, legen Sie die Bereiche in chronologischer Reihenfolge :)