jQuery UI datepicker s'ouvre automatiquement dans la boîte de dialogue
J'ai un datepicker qui est utilisé dans l'objet de dialogue jQuery. La source du contenu de la boîte de dialogue est chargée à l'aide de .load(). Dans le dialogue, j'ai créé un script qui crée un sélecteur de date pour la saisie de texte.
$("#date").datepicker({ ... });
Lorsque j'ouvre le dialogue pour la première fois - tout va bien, mais si je le ferme et que je rouvre à nouveau, le sélecteur de date se déclenche automatiquement (et il n'existe aucune option telle que autoOpen:false) Y a-t-il un moyen d'empêcher cela ou qu'est-ce que je fais mal?
J'ai eu ce problème et je l'ai résolu avec une légère variation de la technique de tvanfosson. Pour une raison quelconque, je devais attacher manuellement l'événement "click" au champ datepicker comme indiqué ci-dessous.
$('#dialog').dialog({
open: function(event, ui) {
$(ui).find('#date').datepicker().click(function(){
$(this).datepicker('show');
});
},
close: function(event,ui) {
$(ui).find('#date').datepicker('destroy');
}});
(Désolé - j'aurais préféré poster ceci en tant que commentaire sur le post de tvanfosson mais je n'ai pas le représentant requis.)
De manière beaucoup plus simple, j'ai trouvé:
$("#dialogPopper").click(
function() {
$("#date").datepicker("disable");
$("#dialog").dialog("open");
$("#date").datepicker("enable");
return false;
}
);
Lorsque vous placez le champ sélecteur de date au début de la boîte de dialogue, il s’ouvre automatiquement. Vous pouvez placer une entrée masquée au début de la boîte de dialogue.
<input type="text" style="width: 0; height: 0; top: -100px; position: absolute;"/>
Vous voudrez peut-être envisager de détruire le sélecteur de date lorsque la boîte de dialogue sera fermée et de le créer dans le gestionnaire d'événements ouvert pour la boîte de dialogue au lieu de l'inclure en tant que script dans la création de la boîte de dialogue.
$('#dialog').dialog({
open: function(event, ui) {
$(ui).find('#date').datepicker();
},
close: function(event,ui) {
$(ui).find('#date').datepicker('destroy');
}
});
Vous pouvez également expérimenter différents événements/méthodes pour voir si vous devez vraiment le recréer, mais je pense que cela fonctionnerait.
La raison est la suivante: votre premier élément du formulaire modal est le champ de texte datepicker et lorsque le modal est déclenché, le contrôle actif est celui qui contient le sélecteur de date.
J'ai découvert deux solutions alternatives:
Changer l'ordre de vos champs. Évitez celui avec datepicker de rester en première place.
Ne définissez pas datepicker sur le champ dans un morceau de code séparé, faites-le à l'intérieur de la fonction qui ouvre la boîte de dialogue (juste après l'ouverture de
$("#dialog").dialog("open");).
Le sélecteur de raison s’ouvre tout seul, c’est que le champ de saisie reste concentré lorsque vous ouvrez le sélecteur pour la première fois.
Vous devez le brouiller:
$input.datepicker({
onClose: function(dateText) {
$(this).trigger('blur');
}
});
J'avais un problème similaire. J'ai un datepicker jquery dans un dialogue jquery ui. Le sélecteur de date s'ouvrait automatiquement dans IE lorsque j'ai ouvert la boîte de dialogue. Ce n'était pas le cas dans Firefox ou Chrome ... J'ai résolu le problème en désactivant le sélecteur de date lors de la création dans le $ (document) .ready comme suit:
$('.ConfirmMove #from').datepicker({
duration: ''
}).datepicker('disable');
Ensuite, lorsque j'ai ouvert la boîte de dialogue contenant ce datepicker, je l'ai activé dans le gestionnaire d'événements ouvert de la boîte de dialogue:
$(".ConfirmMove").dialog({
close: function() {
$('.ConfirmMove #from').datepicker('disable');
},
open: function() {
$('.ConfirmMove #from').datepicker('enable');
}
});
Vous devez également vous rappeler de le désactiver lorsque vous fermez la boîte de dialogue.
De cette manière, vous ne détruisez pas et ne recréez pas le sélecteur de date chaque fois que vous ouvrez et fermez la boîte de dialogue.
C'est juste le focus du dialogue: api.jqueryui.com/dialog/
Lors de l'ouverture d'une boîte de dialogue, le focus est automatiquement déplacé sur le premier élément qui correspond au suivant
- Le premier élément du dialogue avec l'attribut autofocus
- Le premier: élément tabable dans le contenu de la boîte de dialogue
- Le premier: élément tabable dans la fenêtre de la boîte de dialogue
- Le bouton de fermeture du dialogue
- Le dialogue lui-même
Une solution consiste à utiliser l'attribut autofocus dans d'autres champs que datepicker.
C'est ce que j'ai fait pour résoudre mon problème.
Ce code est dans la création du dialogue.
document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);
De cette façon, lorsque la boîte de dialogue s’ouvrira, elle se concentrera sur un autre contrôle.
Vous pouvez tester le délai d’attente pour un délai plus court, mais 100 me convenait.
Pour une raison quelconque, le calendrier a cessé d'avoir ce comportement lorsque j'ai renseigné l'option d'animation dans l'initialiseur:
showAnim: Drop
D'après le code source, jQuery.Dialog suit toujours l'événement focusin sur les éléments de la boîte de dialogue et déclenche l'événement focus sur cet élément une fois que la boîte de dialogue a obtenu l'état actif. Pour éviter ce problème, arrêtez simplement la propagation des événements de bullage à partir de l'élément en cours de focalisation.
$("#input").on("focusin", function (e) {
return false; // or e.stopPropagation();
}).datepicker();
- Notez qu'il existe des différences entre les versions
jQuery - Ticket http://bugs.jqueryui.com/ticket/9125
Je sais que c’est une vieille question, mais une solution qui a fonctionné pour moi a été de déclencher une icône de calendrier:
$( ".date" ).datepicker({
showOn: "button",
buttonImage: "../css/imgs/calendar.gif",
buttonImageOnly: true
});