Restreindre la date dans jquery datepicker basé sur une autre datepicker ou une zone de texte

Question

J'ai deux zones de texte avec un datpicker branché à eux. Les zones de texte sont pour la date de début et la date de fin. Le premier datepicker est configuré de sorte que l'utilisateur ne peut pas choisir une date avant aujourd'hui, mais peut choisir n'importe quelle date dans le futur.

Comment puis-je configurer le second calendrier de sorte qu'il ne puisse pas choisir une date avant la date choisie dans le premier sélecteur de date? Par exemple: Si aujourd'hui est le 12/11/10 et que je choisis le 15/12/10 dans le premier datepicker, alors le second sélecteur de date ne devrait pas pouvoir choisir quoi que ce soit avant le 15/12/10.

Heres ce que j'ai jusqu'à présent:

$("#txtStartDate").datepicker({ minDate: 0 }); 
$("#txtEndDate").datepicker({}); 

Answer 1

Par exemple, dans cet exemple de code, startDatePicker est sélectionné comme 2010-12-12, événement de changement de startDatePicker définit la MinDate de endDatePicker 2010-12-13. Il verrouille les cellules avant cette date. Ceci est un échantillon pour ce que @Victor a mentionné .. J'espère que cela aide ... Cordialement ... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
}); 

Answer 2

Du point de vue de l'interface utilisateur pur, vous ne devriez pas. Si l'utilisateur choisit le mauvais mois sur les deux datepickers, et essaie de sélectionner le mois correct, il a un changement de 50% d'être gêné par l'interface utilisateur. Idéalement, vous autorisez la sélection incorrecte et affichez un message d'erreur utile indiquant que la date de fin doit être postérieure à la date de fin.

Si vous souhaitez implémenter votre idée: donnez à chaque programme datepicker un événement "change" qui modifie les options de l'autre outil de date de manière appropriée.

Answer 3

Utilisez la fonction « getDate » méthode de la première interface utilisateur datepicker et passer dans minDate choix du deuxième datepicker:

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
}); 

Answer 4

Mise à jour:

L'approche ci-dessus fixé MinDate uniquement sur le temps de création. Je utilisé l'événement onSelect pour modifier l'option MinDate de la deuxième DatePicker comme ceci:

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

Answer 5

Utilisez ce code:

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script> 

Answer 6

essayer cet homme:

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date()); 

Answer 7

la solution de Tin Man a fonctionné pour moi après avoir ajouté $ ("# txtEndDate"). datepicker() en bas

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line