Bootstrap DatePicker à l'intérieur Modal ne fonctionne pas
J'ai cette datepicker à l'intérieur d'un modal, mais ne fonctionne pas. J'ai déjà essayé quelques codes que j'ai vu dans le forum, mais aucun d'eux de travailler. Cela pourrait-il être un javascript problème? Je ne suis pas sûr de ce qu'il n'est pas de montrer le datepicker,quelqu'un qui peut m'aider svp merci
JS:
<script>
$(document).ready(function() {
$('#datePicker')
.datepicker({
format: 'mm/dd/yyyy'
})
.on('changeDate', function(e) {
//Revalidate the date field
$('#eventForm').formValidation('revalidateField', 'date');
});
$('#eventForm').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'The date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The date is not a valid'
}
}
}
}
});
});
</script>
HTML:
<div class="form-group">
<label class="col-xs-3 control-label">Date</label>
<div class="col-xs-5 date">
<div class="input-group input-append date" id="datePicker">
<input type="text" class="awe-calendar" name="date" />
<span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
- charger le
jquery
etbootstrap.min.js
à la fin de la balise body - j'ai déjà de la charge à la fin de la balise body.
- le datepicker est un travail, mais c'est l'affichage au-dessus du champ de saisie
- Que voulez-vous dire? le datepicker est pas à l'affiche.
- Je ne peux pas cliquer sur le calendrier d'un logo.
- Parce que le calendrier logo est juste dans la durée dans des div à l'
- il y a une erreur dans votre code dans
$('#eventForm').formValidation({
cette ligne - cochez cette jsbin jsbin.com/rezufa/edit?html,css,js,sortie
Vous devez vous connecter pour publier un commentaire.
ajouter un z-index au-dessus de 1051 dans la classe datepicker
ajouter quelque chose comme cela dans la page css ou
Le même problème, j'ai fait face, la meilleure méthode est s'il vous plaît vérifier ci-dessous le code que j'ai utilisé pour résoudre ce problème. Cela fonctionne quand vous cliquez sur n'importe où dans le corps
S'il vous plaît ajouter le juste au-dessus de
J'ai fait un exemple d'application pour le montrer. Ses travaux fine
J'ai même problème et après plusieurs heures, j'ai trouvé ce simple mais utile réponse en css.
Si vous souhaitez utiliser jquery après l'appel du modal, vous pouvez le faire comme ceci:
Grâce à Alfredo
Changer l'id de la balise d'entrée à
datepicker
, il peut fonctionner.ajouter ceci: