CODEWITHSUNDEEP
jquery-uijqueryjquery-plugins
user2156088
user2156088

Reputation: 2420

Datepicker using Jquery loses focus to the textbox after date selected.

Datepicker using Jquery loses focus to the textbox after date selected. I am using jquery-ui-1.9.2.When a date is selected the focus not coming to the textbox.Any solution?

Upvotes: 2

Views: 10067

Answers (5)

JustAMartin
JustAMartin

Reputation: 13723

Exapnding Praveen's answer. I had one problem with it. On IE datepicker refused to show up each odd time I focused a field.

Also, there was a slight logical issue with that solution (which did not affect anything, but still not correct to my eye): fixFocusIE field is being set on options, but then later it is being called on "this", when "this" refers to DOM element and not options object. So essentially there are two fixFocusIE - one in options (unused) and the second one on DOM element itself.

And also $.browser.msie did not work anymore, I had to invent my own IE detector.

My working code looks like that:

var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity

options.fixFocusIE = false;

function detectIE() {
    var ua = window.navigator.userAgent;

    if(ua.indexOf('MSIE ') > 0 || 
       ua.indexOf('Trident/') > 0 || 
       ua.indexOf('Edge/') > 0) {

       return true;
    }

    // other browser
    return false;
}    

/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
    options.fixFocusIE = true;
    $(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
    options.fixFocusIE = true;
    this.focus();
};
options.beforeShow = function(input, inst) {
    var result = detectIE() ? !options.fixFocusIE : true;
    options.fixFocusIE = false;
    return result;
};

/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
    options.fixFocusIE = false;
});

el.datepicker(options);

Upvotes: 0

Shawn Flock
Shawn Flock

Reputation: 11

   $(".datepicker").datepicker({
        onClose: function () {
            $(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();

        }
    });
});

I have found an easier way that will put the focus on the next input, no matter how nested it is. You can always swap out the condition after the .find to whatever you like and it will bring the focus to that.

Upvotes: 1

Praveen
Praveen

Reputation: 56501

Try using the below code.

HTML code:
<input type="text" id="date"/>

JQuery: 

$("#date").datepicker({
    onClose: function () {
     $(this).focus();  
    } 
});

JSFiddle1

EDIT: The above code has a problem in IE, the datepicker is not getting closed. Here in this blog you can find the more information.

<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this

$("#date").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,   
   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;
   }
});

JSFiddle2

Upvotes: 5

user2156088
user2156088

Reputation: 2420

    $('.datepicker').datepicker(
     {

      onClose: function () {

        this.focus();
      }
 });

Upvotes: 0

Abhinav Jayaram
Abhinav Jayaram

Reputation: 156

Initialise all the datepcikers on Doc Ready

Upvotes: 0

Related Questions