jQuery ui: plusieurs plages pour le sélecteur de date?

Question

Je souhaite utiliser jQuery-ui datepicker pour mon projet, mais je dois pouvoir avoir plusieurs plages disjointes de dates valides. Les dates ne figurant pas dans l'une de ces plages ne doivent pas être sélectionnables.

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

Comment est-ce que j'allais mettre en œuvre ceci? J'apprécierais toute aide.

Answer 1

Vous pouvez utiliser beforeShowDay pour limiter la plage lors de l'affichage mois, comme ceci:

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

---

Ou, voici une approche légèrement moins efficace mais plus souple pour un certain nombre de jour gammes:

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, il suffit de mettre les plages dans l'ordre chronologique :)