jquery datetime picker set minDate dynamic

J’utilise un datetimepicker de trensortingchardson.com.

J’ai un formulaire avec deux champs de saisie: de et vers et je veux pouvoir définir de manière dynamic un minDate à mon “to” champ égal à la valeur de mon “de”

Je sais que je devrais utiliser une option beforShow mais je ne sais pas comment implémenter la fonction.

$('.from,.to').datetimepicker({ beforeShow: customRange }); 

RÉVISÉ / SOLUTION

 function customRange(input) { if (input.id == 'to') { var x=$('#from').datepicker("getDate"); $( ".to" ).datepicker( "option", "minDate",x ); } else if (input.id == 'from') { var x=$('#to').datepicker("getDate"); $( ".from" ).datepicker( "option", "maxDate",x ); } } 

    vous pouvez définir et obtenir minDate de manière dynamic avec setter et getter:

     //getter var minDate = $( ".selector" ).datepicker( "option", "minDate" ); //setter $( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) ); 

    expliqué ici

    Si vous avez deux zones de texte avec les identifiants correspondants from et to et que vous souhaitez que la date minDate soit la date de début sélectionnée, procédez comme suit:

     $("#from").datepicker({ minDate: 0, // to disable past dates (skip if not needed) onClose: function(selectedDate) { // Set the minDate of 'to' as the selectedDate of 'from' $("#to").datepicker("option", "minDate", selectedDate); } }); $("#to").datepicker(); 

    Vous pouvez restreindre la plage datepicker .

    Mais vous voulez définir cette plage lors de la création du sélecteur de date sur le “à partir de”. Je t’ai fait une démo qui semble bien fonctionner pour autant que je comprenne la question.

    luca: Un petit ajout à ta réponse …

    En utilisant la fonction que vous avez suggérée, le composant heure est ignoré lors du premier affichage du datetimepicker. Si vous fermez le démodulateur de données et le rouvrez à nouveau, le composant heure réapparaîtra mystérieusement. Je ne suis pas tout à fait sûr de ce qui cause ceci, mais cela peut être corrigé avec un peu de bidouille:

     function setMinMaxDate ( element ) { // Store current date - setting max/min date seems to destroy time component var val = $(element).val(); if (element.id == 'endDate') { var x=$('#startDate').datetimepicker("getDate"); $( element ).datetimepicker( "option", "minDate",x ); } else if (element.id == 'startDate') { var x=$('#endDate').datetimepicker("getDate"); $( element ).datetimepicker( "option", "maxDate",x ); } // Restore date $(element).val(val); } 

    Il y a un exemple sur trensortingchardson.com. Ils utilisent “onSelect”. Pour moi ça ne marche pas parfaitement. Lors du réglage de minDate ou MaxDate, le composant heure est défini sur 0 et seule la date rest. Et je devais résoudre certains problèmes de localisation.

    Aucune des réponses ci-dessus ne m’a aidé du tout. Cela n’a pas fonctionné ou a donné une sorte d’erreur.

    Alors, je les ai fusionnées et j’ai créé la mienne. J’ai utilisé moment.js comme mentionné ci-dessus, il suffit de le télécharger et de l’inclure dans votre page.

     $("#start_date").datetimepicker({ format: 'Ymd H:00:00', onChangeDateTime: function(dp, $input){ var dt2 = $('#end_date'); var minDate = $('#start_date').val(); var currentDate = new Date(); var targetDate = moment(minDate).toDate(); var dateDifference = currentDate - targetDate; var minLimitDate = moment(dateDifference).format('YYYY/MM/DD'); var endDate = moment(dt2.val()).toDate(); if((currentDate - endDate) >= (currentDate - targetDate)) dt2.datetimepicker({ 'value': minDate }); dt2.datetimepicker({ 'minDate': '-'+minLimitDate }); } }); $("#end_date").datetimepicker({ format: 'Ymd H:00:00' }); 

    Je suis sûr qu’il existe un meilleur moyen de le faire mais je ne l’ai pas trouvé. J’espère donc que cela aidera quelqu’un à l’avenir.

    Cela a fonctionné pour moi

     "/>