Comment définir minDate et maxDate de bootstrap datetimepicker sur modifier
Je veux demander à l'utilisateur une plage de dates à l'aide de bootstrap datetimepicker. Il y a un champ pour la date de début et un autre pour la date de fin, et ils sont initialisés à la veille de la journée en cours. Sur le changement de la date de début, je veux mettre le minDate de la date de fin de la valeur de la date de début; et sur le changement de date de fin, je veux le max de date de date de début à la valeur de la date de fin. Mais je ne peux pas obtenir ce travail.
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 code 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 à propos de l'opération semblable sur datepicker
, mais c'est fait différemment de datetimepicker
donc merci de ne pas marquer en double sauf si vous trouvez la même question pour datetimepicker
.
OriginalL'auteur alamoot | 2014-11-17
Vous devez vous connecter pour publier un commentaire.
Basé sur la Lié Cueilleurs exemple dans le Bootstrap, documentation datetimepicker, cela devrait fonctionner.
Début:
Fin:
Remarque:
Sur les anciennes versions de Bootstrap datetimepicker (moins de v4), l'utilisation
.setMinDate
et.setMaxDate
$(...).data(...).setMinDate is not a function
pouvez-vous vérifier la mise à jour de réponse? (Utiliser
.minDate
au lieu de.setMinDate
) liées exemple semble avoir été mis à jour autour de l'heure à la bibliothèque déménage à v4 changelog ne parle pas de cela, bien qu'Comment faire pour ajouter dynamiquement des éléments??
OriginalL'auteur Raghd Hamzeh
Date De Début
Date De Fin
Package De Mise À Niveau :
La date timepicker paquet a été mis à jour à la dernière version où l'on peut utiliser 'maxDate()' au lieu de 'setMaxDate()' et 'minDate()' de la place de 'setMinDate ()', comme les dernières options de compte, même de temps en heures et minutes, tout en fournissant maxDate/minDate option.
Je crois qu'à l'époque de la création des éléments qui peuvent être quelque chose comme
click
événementOriginalL'auteur Sai Ram
Essayez d'utiliser:
OriginalL'auteur bozydarlelutko