jQuery UI DatePicker - Date de départ et date de retour

Question

Fondamentalement, ce que j'essaie de faire est de créer deux champs DatePicker. Le premier est la date de départ et le second est la date de retour. Ainsi, par exemple, si quelqu'un recherchait un séjour de 5 nuits, les dates seraient les suivantes:

01/12/2010 | Calendrier Icône 07/12/2010 | Calendrier Icône

Pour la date de départ, vous pouvez sélectionner n'importe quelle date (date d'aujourd'hui ou date ultérieure). Et lorsque vous avez cliqué sur la date de retour, vous ne pouvez sélectionner que les dates qui sont cinq nuits après la date de départ.

J'ai presque eu ce fonctionnement de la manière de lire divers autres articles de débordement de pile. Voici le code que je utilise:

$().ready(function() { 
    $('.dDate, .rDate').datepicker({ 
     showOn: 'both', 
     buttonImage: "<?=$http?>layout_images/calendar.gif", 
     buttonImageOnly: true, 
     beforeShow: customRange, 
     buttonText: 'Open Calendar', 
     firstDay: 1, 
     dateFormat: 'D d M yy', 
     onSelect: function(date) { 
      date = $(this).datepicker('getDate'); 
      $('#returningdate').val($.datepicker.formatDate('D d M yy', date)); 
     } 
    }); 
}); 

function customRange(a) { 
    var b = new Date(); 
    var c = new Date(b.getFullYear(), b.getMonth(), b.getDate()); 
    if (a.id == 'returningdate') { 
     if ($('.dDate').datepicker('getDate') != null) { 
      c = $('.dDate').datepicker('getDate'); 
     } 
    } 
    return { 
     minDate: c 
    } 
} 

Ce code effectue les opérations suivantes:

Si je sélectionne 01/12/2010 dans le champ de date au départ. Il remplit automatiquement la date de retour avec 01/12/2010.

Dans le champ de la date de départ je peux sélectionner n'importe quelle date (date d'aujourd'hui et plus) et maintenant dans la date de retour je ne peux pas sélectionner des jours avant le 01/12/2010.

Mais ce que je veux arriver, c'est quand je sélectionne le 01/12/2010 dans la date de départ, il va ajouter les 5 nuits automatiquement et faire la date de retour 07/12/2010 et ne pas permettre à tous les jours avant que être sélectionné.

Y at-il un moyen facile de modifier le code ci-dessus pour travailler de cette façon?

Un grand merci,

Quintin Hobson

Answer 1

Ceci est la solution que je trouve:

$(document).ready(function() { 
     $('.dDate, .rDate').datepicker({ 
      showOn: 'both', 
      buttonImage: '<?=$http?>layout_images/calendar.gif', 
      buttonImageOnly: true, 
      beforeShow: customRange, 
      buttonText: 'Open Calendar', 
      firstDay: 1, 
      dateFormat: 'D d M yy', 
      onSelect: function(date) { 
       date = $(this).datepicker('getDate'); 
       if($(this).attr("id") != 'returningdate'){ 
        var returnDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() + 6); 
        $('#returningdate').val($.datepicker.formatDate('D d M yy', returnDate)); 
       } 
      } 
     }); 
    }); 

    function customRange(a) { 
     var returnDateMin; 
     var b = new Date(); 
     var c = new Date(b.getFullYear(), b.getMonth(), b.getDate()); 
     if (a.id == 'returningdate') 
     { 
      if ($('.dDate').datepicker('getDate') != null) { 
       c = $('.dDate').datepicker('getDate'); 
      } 
      returnDateMin = new Date(c.getFullYear(), c.getMonth(), c.getDate() + 6); 
     } 
     else 
     { 
      returnDateMin = c; 
     } 
     return { 
      minDate: returnDateMin 
     } 
    }