Éviter de rouvrir datepicker après avoir sélectionner une date

Seulement dans IE avec ce code

$('#datepicker').datepicker({
    onSelect : function(x, u){
     $(this).focus();   
    }
});

lorsque je sélectionne une date, le datepicker rouvrir lui-même parce que j'ai ajouté $(this).focus(); dans onSelect. Comment je peux résoudre ce problème? (Exemple)

Je suis en utilisant jquery 1.8.2 et jquery-ui 1.9

ce lien peut aider forum.jquery.com/topic/...
est-ce si important pour définir le focus après la sélection? Il y a de nombreux événements à puiser dans datepicker de l'API. Ma conjecture est que jQuery UI équipe a retiré l'accent, c'est à dire pour la même raison
Oui, C'est important
ne pas comprendre comment ce lien pourrait résoudre mon problème 🙁

InformationsquelleAutor Webman | 2012-10-22

9

C'est la meilleure solution je peux obtenir:

(inspiré de ce lien)

jsFiddle
```
$('#datepicker').datepicker({
            /* fix buggy IE focus functionality */
            fixFocusIE: false,    
            onSelect: function(dateText, inst) {
                  this.fixFocusIE = true;
                        $(this).change().focus();
            },
            onClose: function(dateText, inst) {
                  this.fixFocusIE = true;
                  this.focus();
            },
            beforeShow: function(input, inst) {
                  var result = $.browser.msie ? !this.fixFocusIE : true;
                  this.fixFocusIE = false;
                  return result;
            }
}).click(function(){$(this).focus()});
```
Veuillez noter que vous suggérez dans votre question, la messagerie instantanée à l'aide de jquery-UI 1.9.0. Dans votre exemple, vous avez été à l'aide de jquery-ui 1.8.15 qui est connu pour être buggé sur certains événements (e.g beforeShow() sur IE).
- plein de travail pour moi
- +1 requis pour l'utilisation de 1.9.0 jquery-ui version en raison de buggy mise en œuvre de beforeShow cas dans les versions précédentes
- super..il travail pour moi 🙂
- Cela ne fonctionne pas en jQuery > 1.9 dans IE <= 9 jsfiddle.net/hv77F/22 L'internet a besoin d'une solution à cela, n'importe qui devrait avoir suffisamment de temps faire un don pour une bonne cause!
- Essayez d'ajouter un vide (ou, pour JSLint, un return undefined;) onSelect gestionnaire. N'ont pas compris pourquoi cela fonctionne, mais ça fonctionne pour moi jusqu'à présent (YMMV).
- Ne fonctionne pas pour moi (IE11). Aucune solution trouvée jusqu'à présent. Et BTW $.navigateur est obsolète dans jQuery nouveau.
InformationsquelleAutor A. Wolff
12

Je suis tombé sur cette question aujourd'hui et avait une autre solution pour moi. Mon scénario était que mon DatePicker était à l'intérieur d'un jQuery UI boîte de Dialogue contextuelle. Tout a bien fonctionné dans Chrome, mais sous IE, le calendrier serait toujours réapparaître après la sélection d'une date.

Comme il s'avère, il y a un bug dans jQuery 1.10.1: http://bugs.jqueryui.com/ticket/9125

Il y a aussi un JSFiddle liée à celle démontre le bug sous IE. Il y a deux façons d'obtenir que cela fonctionne sous IE:
1. Ensemble modal à false
2. L'accent sur un autre élément à droite après la date de sélection
Je suis allé avec #2, et ici est un exemple de la fix (juste la mise à jour de la JSFiddle code):

Balisage:
```
<div id="dialog">
    <input id="datepicker" />
    <input type='button' value='save' id='btnSave'/>    
</div>
```
JS:
```
$( "#datepicker" ).datepicker({onSelect: function() { $('#btnSave').focus(); }});
$( "#dialog" ).dialog({ modal: true });
```
J'espère que cela aide quelqu'un dans le futur!
- Très complet pour la réponse, merci. Je suis allé de l'avant et upvoted qui bug sur bugs.jqueryui.com. Aussi, j'ai fini à l'aide de #2 solution que vous avez suggéré. Je focus par défaut pour le bouton annuler dans le cas où ils accidentellement appuyez sur entrée.
- Hmmm effectivement un problème que j'ai rencontré après l'utilisation de la solution n ° 2 est que j'avais accroché une fonction à l'événement de changement de la zone de texte du DatePicker a été créé.... et l'événement de changement de ne pas tirer plus. Ainsi, au lieu de l'utilisation de la solution n ° 2... j'ai mis <span tabindex="4"></span> type d'éléments entre chaque zone de texte/datepicker, de sorte qu'ils seraient mis l'accent sur par défaut au lieu de la datepickers après je sélectionner une date. Quand je sélectionne une date dans mon 2ème datepicker, il tord définit le focus de mon vide span maintenant. Assurez-vous de configurer votre attribut tabindex à ce qui fait sens pour votre page.
InformationsquelleAutor lhan

- Je l'utiliser pour IE, il arrête le datepicker de la ré-ouverture trop

JQuery:

        onSelect: function(){ 
        $("#focusfix").focus();
    },

HTML (première ligne de la boîte de dialogue div):

<input class="ui-helper-hidden-accessible" id="focusfix" type="text"autofocus/>

InformationsquelleAutor elboffor

Depuis .browser est retiré après jQuery 1.9, j'ai dû légèrement modifier le code. Cela fonctionne pour moi:

$('#datepicker').datepicker({
    /* fix buggy IE focus functionality */
    fixFocusIE: false,    
    onSelect: function(dateText, inst) {
          this.fixFocusIE = true;
                $(this).change().focus();
    },
    onClose: function(dateText, inst) {
          this.fixFocusIE = true;
          this.focus();
    },
    beforeShow: function(input, inst) {
          var result = true;
          if (navigator.appName == 'Microsoft Internet Explorer') {
            result = !this.fixFocusIE;
          }
          this.fixFocusIE = false;
          return result;
    }
}).click(function(){$(this).focus()});

IE 11 renvoie une valeur de "Netscape" pour navigator.appName avec google Chrome/Safari/Firefox apparemment. Plutôt que de rechercher à la fois les valeurs que j'ai supprimé la condition, tous ensemble et n'ai pas remarqué de différence dans le non-IE navigateurs. Quelqu'un peut-il penser à une raison pour conserver le conditionnel (if (navigator.appName == 'Microsoft Internet Explorer') {)?

InformationsquelleAutor Oleg Andreev

0

Essayez ceci:
```
$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus(); 
   $(this).datepicker("hide");     
},
onClose: function(e){
e.preventDefault();
}
});
```
voici le violon http://jsfiddle.net/VZts7/69/

Ou pour IE8:
```
$('#datepicker').datepicker({
onSelect : function(x, u){
 $(this).focus();     
},
onClose: function(e){
(this).datepicker("hide");   
}
});
```
même si ce n'est pas une solution parfaite, voir le travail de violon http://jsfiddle.net/hv77F/2/
- Il fonctionne, mais il y a une exeception "l'Objet ne prend pas en charge la propriété ou de la méthode preventDefault' "
- nothig! Maintenant l'erreur est "l'événement n'est pas défini" parce que, je suppose, "OnClose" accepter deux paramètres seulement "dateTxt" et "inst" (instance de datepicker)
- désolé, le changement "l'événement" en "e"
- avec un "e", je ne vois pas plus l'erreur, mais le datepicker rouvrir lui-même 🙁
- voir modification de ma réponse
- rien. L'édition de solution fonctionne pas avec IE8 et IE9
- le violon en plein travaux dans IE8, mais rôti réponse est meilleure que la mienne, voir sa réponse
- cependant ..merci pour vos réponses
InformationsquelleAutor Franky

Solution pour jQuery > 1.9 dans IE <= 9

{fixFocusIE: false},    
        {onSelect: function(dateText, inst) {
              this.fixFocusIE = true;
              $(this).change().focus();

            }
        },
        {onClose: function(dateText, inst) {
              this.fixFocusIE = true;
              this.focus();

            }
        },
        {beforeShow: function(input, inst) {
              var result = isIE ? !this.fixFocusIE : true;                      
              this.fixFocusIE = false;                      
              return result;
         }

function isIE() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf("MSIE ");

        if (msie > 0)      
           return true;
        else                 

        return false;
    }

InformationsquelleAutor devSouth555

Necromancing.

J'ai eu le même problème, sauf aucune des réponses mentionnées ici travaillé.

Il est peut-être parce que le code que j'ai à travailler sur des œuvres avec des iframe, mais je n'ai pas maintenant pour vous.

Sur le dessus, je ne pouvais pas mettre à jour vers la dernière version, car elle permettrait de casser la compatibilité avec le reste du projet, j'ai eu à travailler sur.

C'est ce qu'il est corrigé pour moi:

initDatePicker: function ()
{
    //Initialize datepicker 
    var qs = document.getElementsByClassName("datepick");
    for (var i = 0; i < qs.length; ++i)
    {
        $(qs[i]).datepicker(
        {
            //showOn: "button"
            //showOn: "both"
              showOn: "focus"
            , buttonImage: "../images/cal.gif"
            , buttonImageOnly: true
            //, buttonImageOnly: false
            , dateFormat: 'dd.mm.yy'
            , changeMonth: true
            , changeYear: true
            , showWeek: false //true
            , firstDay: 1
            , showOtherMonths: true //false 
            , selectOtherMonths: true
            , showButtonPanel: true


            //,onSelect : function(x, u){
            //   //$(this).focus(); 

            //   window.setTimeout(function () { $("#txtSchulungsTyp").focus(); $(this).datepicker("hide"); }, 300);
            //},
            //onClose: function(e){
            //   //e.preventDefault();
            //   e.preventDefault ? e.preventDefault() : e.returnValue = false;
            //   return false;
            //}



            , onSelect: function ()
            {
                $(this).datepicker('disable');
            }
            , onClose: function ()
            {
                window.setTimeout(function (e)
                {
                    $(e).datepicker('enable')
                }.bind(undefined, this), 500)
            }

        })
        ; //End datepicker


        //console.log(mGlobalLanguage);

        //$(qs[i]).datepicker("option", $.datepicker.regional['de']);  
        //$(qs[i]).datepicker("option", $.datepicker.regional['FR']);
    } //Next i 
}

InformationsquelleAutor Stefan Steiger

Vous devez vous connecter pour publier un commentaire.