jQuery ui: intervalli multipli per il selettore di date?

Question

Voglio usare il jQuery-ui DatePicker per il mio progetto, ma devo essere in grado di avere intervalli multipli disgiunti di date valide. Le date non in uno di questi intervalli non dovrebbero essere selezionabili.

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

Come posso implementare questo? Apprezzerei qualsiasi aiuto.

Answer 1

Si potrebbe utilizzare beforeShowDay per limitare l'intervallo durante la visualizzazione di mesi, in questo modo:

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

---

Oppure, ecco un approccio un po 'meno efficiente ma più flessibile per qualsiasi numero di data intervalli:

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, metti gli intervalli in ordine cronologico :)