jQuery UI datepicker s'ouvre automatiquement dans la boîte de dialogue

Beaucoup plus simple que j'ai trouvé:

$("#dialogPopper").click(
                    function() {
                        $("#date").datepicker("disable");
                        $("#dialog").dialog("open");
                        $("#date").datepicker("enable");
                        return false;
                    }
                  );

Lorsque vous placez le champ datepicker 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 pouvez penser à détruire le datepicker lorsque la boîte de dialogue est fermée et à la 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 avec différents événements / méthodes pour voir si vous avez vraiment besoin de le recréer, mais je pense que cela fonctionnerait.

La raison en est: votre premier élément dans le formulaire modal est le champ de texte datepicker, et lorsque le modal est déclenché, le contrôle actif est celui qui contient le datepicker.

J'ai trouvé deux solutions alternatives:

1. Modifier l'ordre de vos champs. Évitez celui avec datepicker pour rester à la première place.

2. Ne définissez pas datepicker sur le champ dans un morceau de code séparé, faites-le dans la fonction qui ouvre la boîte de dialogue (juste après l'ouverture $("#dialog").dialog("open");).

La raison pour laquelle le sélecteur s'ouvre par lui-même, est que le champ de saisie reste concentré après avoir ouvert le sélecteur pour la première fois.

Vous devez le flouter:

$input.datepicker({
  onClose: function(dateText) {
    $(this).trigger('blur');
  }
});

J'avais un problème similaire. J'ai un datepicker jquery dans une boîte de dialogue jQuery ui. Le sélecteur de date s'ouvrait automatiquement dans IE lorsque j'ai ouvert la boîte de dialogue. Il ne le faisait pas dans Firefox ou Chrome... J'ai résolu le problème en désactivant le datepicker lors de la création dans le $(document).prêt comme ça:

$('.ConfirmMove #from').datepicker({
  duration: ''
}).datepicker('disable');

Ensuite, lorsque j'ouvrais la boîte de dialogue contenant ce datepicker, Je l'ai activée 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 façon, vous ne détruisez pas et ne recréez pas le datepicker chaque fois que vous ouvrez et fermez la boîte de dialogue.

C'est Ce que j'ai fait pour résoudre mon problème.

Ce code est dans la création de la boîte de dialogue.

document.getElementById('date').disabled = true;
setTimeout('document.getElementById("date").disabled = false;', 100);

De cette façon, si la boîte de dialogue s'ouvre, elle se concentrera dans un autre contrôle.

Vous pouvez tester le délai d'attente pour une plus petite quantité de retard, mais 100 était ok pour moi.

C'est juste de la boîte de dialogue focus: api.jqueryui.com/dialog/

Lors de l'ouverture d'une boîte de dialogue, le focus est automatiquement déplacé vers le premier élément correspondant à

1. le premier élément de la boîte de dialogue avec l'attribut autofocus
2. le premier: élément tabbable dans le contenu de la boîte de dialogue
3. le premier: élément tabbable dans le buttonpane de la boîte de dialogue
4. le bouton de fermeture de la boîte de dialogue
5. La boîte de dialogue elle-même

Une solution consiste à utiliser l'attribut autofocus sur d'autres champs que datepicker.

Je sais que c'est une vieille question, mais une solution qui a fonctionné pour moi a déclenché une icône de calendrier:

$( ".date" ).datepicker({
  showOn: "button",
  buttonImage: "../css/imgs/calendar.gif",
  buttonImageOnly: true
});

Pour une raison quelconque, le calendrier a cessé d'avoir ce comportement lorsque j'ai rempli l'option d'animation dans l'initialiseur:

ShowAnim: Drop

À partir du code source, j'ai trouvé que jQuery.Dialog suit toujours focusin événement sur les éléments dans dialog, et déclenche focus événement sur cet élément après que dialog gagne l'état actif. Pour éviter ce comportement, arrêtez simplement la propagation des événements bouillonnants À partir de l'élément focalisé.

$("#input").on("focusin", function (e) {
   return false; // or e.stopPropagation();
}).datepicker();

• notez qu'il existe des différences entre les versions jQuery
• Billet http://bugs.jqueryui.com/ticket/9125