jQuery DatePicker - 2 champs

Question

Je travaille actuellement avec jQuery et en utilisant le programme datepicker.

J'ai deux champs de saisie: Date de début et Date de fin. Lorsque vous cliquez sur chacun, le sélecteur de date apparaît.

Pour le champ "Date de fin", je souhaite que le sélecteur de date jQuery mette en surbrillance le même jour. Par exemple, si un utilisateur choisit le 8/12/09 comme date de début, pour la date de fin, il ne peut rien choisir AVANT le 12/08/09.

Voici ce que j'ai actuellement:

$("#datepicker").datepicker({minDate: +5, maxDate: '+1M +10D', changeMonth: true}); 
var startDate = $("#datepicker").val(); 
var the_date = new Date(startDate); 
$("#datepicker2").datepicker({ minDate: the_date }); 

Et, unforunately, cela ne fonctionne pas.

J'ai trouvé que si je « coder en dur » les valeurs, comme:

$("#datepicker2").datepicker({ minDate: new Date("08/12/2009") }); 

cela fonctionnera très bien. Des idées sur la façon de passer la "date de début" au sélecteur "date de fin"?

Merci!

Answer 1

ce travail ne peux pas

vous avez besoin d'une fonction de rappel à partir du sélecteur de date pour l'événement « picking ». Avant cet événement, votre date de départ sera vide.

essayez ceci:

$("#datepicker").datepicker({ 
    minDate: +5, 
    maxDate: '+1M +10D', 
    changeMonth: true, 
    onSelect: function(dateText, inst){ 
       var the_date = new Date(dateText); 
       $("#datepicker2").datepicker('option', 'minDate', the_date); 
    } 
}); 
$("#datepicker2").datepicker(); // add options if you want 

Answer 2

date de début date de fin http://rowsandcolumns.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html

Answer 3

culture date heure sera différent pour l'utilisateur différent. le minimum de jquery ui ne fonctionne pas pour ce code ci-dessus. et initialement si je choisis la date de fin, la date minimum ne sera pas fixée pour la date de fin.

<input type="text" id="tbStartDate" value="" disabled="disabled" /> 
<input type="text" id="tbEndDate" value="" disabled="disabled" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#tbStartDate").datepicker({ 
      //minDate: +5, 
      //maxDate: '+1M +10D', 
      //changeMonth: true, 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onSelect: function (dateText, inst) { 
       $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate'))); 
      }, 
      onClose: function (dateText, inst) { 
       //$("#StartDate").val($("#tbStartDate").val()); 
      } 
     }); 

     $("#tbEndDate").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      showOn: 'button', 
      buttonImageOnly: true, 
      buttonImage: '/Content/Calendar.png', 
      buttonText: 'Click here (date)', 
      onClose: function (dateText, inst) { 
       //$("#EndDate").val($("#tbEndDate").val()); 
      } 
     }); 

     $('#tbEndDate').datepicker("option", 'minDate', new Date($("#tbStartDate").datepicker('getDate'))); 
    }); 
</script>