Javascript Girl
  1. Javascript Girl
  3. Comment configurer minDate et maxDate pour bootstrap datetimepicker lors du changement
Intereting Posts
JSON pour jqPlot Paramètres génériques du document dans JSDOC Java Servlet: Comment détecter la fermeture du navigateur? Laravel Ajax Input :: all () retourne vide lorsque vous l'envoyez via FormData Fermeture de la connexion mongodb dans node.js lors de l'insertion de beaucoup de données Mise à jour d'une image sans rechargement de page JQuery inArray ne fonctionne pas lorsque le premier élément correspond RegEx correspond à un mot qui ne réussit pas un autre Javascript Supprime les chaînes au début et à la fin Propriété dynamique de l'objet JavaScript? KineticJS Undo couches: les couches ne disparaissent pas lors de l'annulation? KnockoutJS: Comment puis-je supprimer un élément d'un tableau enfant? Javascript regex suspend (en utilisant v8) Pourquoi devrais-je modérer les requêtes HTTP dans les tests unitaires? Exploiter la méthode eval () de JavaScript

Comment configurer minDate et maxDate pour bootstrap datetimepicker lors du changement

Je souhaite demander aux utilisateurs une date à l'aide de bootstrap datetimepicker. Il existe un champ pour la date de début et un autre pour la date de fin, et ils sont initialisés au jour précédant le jour en cours. Lors de la modification de la date de début, je souhaite définir la date de fin de la date de fin à la date de début; Et lors de la modification à la date de fin, je souhaite définir la date de début de la date de début à la date de fin de la date de fin. Mais je ne peux pas fonctionner.

Voici le code JS: 

var start = $('.start'); var end = $('.end'); var d = new Date(); var month = d.getMonth() + 1; var day = d.getDate() - 1; var year = d.getFullYear(); start.datetimepicker( { useCurrent: false, defaultDate: month + '-' + day + '-' + year + ' ' + '12:00AM', autoClose: true }) .on('change', function (selected) { end.minDate(selected.?????????); // What should replace the question marks? }); end.datetimepicker( { useCurrent: false, defaultDate: month + '-' + day + '-' + year + ' ' + '11:59PM', autoClose: true }) .on('change', function (selected) { start.maxDate(selected.???????); // What should replace the question marks? });

Et le HTML: 

 <div class="col-sm-3"> <div class="form-group"> <h4>Start Date</h4> <div class="input-group date"> <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class="col-sm-3"> <div class="form-group"> <h4>End Date</h4> <div class="input-group date"> <input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div>

J'ai trouvé des billets sur une opération similaire sur datepicker , mais cela se fait différemment de datetimepicker alors ne marquez pas le duplicata, à moins que vous ne trouviez une question similaire pour datetimepicker .

Basé sur l' exemple de sélectionnés liés dans la documentation Bootstrap datetimepicker , cela devrait fonctionner.

Début: 

  .on('dp.change', function (selected) { end.data("DateTimePicker").minDate(selected.date); });

Fin: 

  .on('dp.change', function (selected) { start.data("DateTimePicker").maxDate(selected.date); });

Remarque:

Sur les anciennes versions de Bootstrap datetimepicker (moins de v4), utilisez .setMinDate et .setMaxDate

  1. Date de début 

     .on('dp.change', function (selected) { end.data("DateTimePicker").minDate(selected.date); });

  2. Date de fin 

     .on('dp.change', function (selected) { start.data("DateTimePicker").maxDate(selected.date); });

Mise à niveau du package : le package date timepicker a été mis à niveau vers la dernière version où nous pouvons utiliser 'maxDate ()' à la place de 'setMaxDate ()' et 'minDate ()' dans le lieu de 'setMinDate ()' car les options récentes considèrent l'instant pair En heures et en minutes tout en offrant l'option maxDate / minDate.