Skip to content

Instantly share code, notes, and snippets.

@sinelaw

sinelaw/datepicker-focus.js

Forked from jeffsheets/datepicker-focus.js
Last active August 29, 2019 13:46
Show Gist options
  • Save sinelaw/5416130 to your computer and use it in GitHub Desktop.
Save sinelaw/5416130 to your computer and use it in GitHub Desktop.
Download ZIP
Fixes reopening of datepicker on IE <= 9 (not tested on IE 10) Changes to work for jQuery 1.9.1 and jQuery-ui 1.10.1: 1. don't use $.browser since it's deprecate. Instead use a var called isIE 2. simplify the handlers 3. use $.datepicker.setDefaults to affect ALL datepickers on the page
Raw
datepicker-focus.js
/*
After jquery ui datepicker selection, blur and change
events fire before focus is returned to the input field,
handling a quirk from IE browsers
*/
function setupDatepicker() {
// The 'isIE' var below requires an '.old-ie' class to be set on the html,
// for example:
// <!--[if lt IE 7]> <html class="old-ie lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
// <!--[if IE 7]> <html class="old-ie ie7 lt-ie9 lt-ie8"> <![endif]-->
// <!--[if IE 8]> <html class="old-ie ie8 lt-ie9"> <![endif]-->
// <!--[if IE 9]> <html class="old-ie ie9"> <![endif]-->
// <!--[if (gt IE 9)|!(IE)]><!--> <html class="" lang="en"> <!--<![endif]-->
var isIE = 0 < $('html.old-ie').length;
$.datepicker.setDefaults({
changeMonth: true,
changeYear: true,
showAnim: "fadeIn",
yearRange: 'c-30:c+30',
showButtonPanel: true,
/* fix buggy IE focus functionality */
fixFocusIE: false,
/* blur needed to correctly handle placeholder text */
onSelect: function (dateText, inst) {
this.fixFocusIE = true;
},
onClose: function (dateText, inst) {
this.fixFocusIE = true;
},
beforeShow: function (input, inst) {
var result = isIE ? !this.fixFocusIE : true;
this.fixFocusIE = false;
return result;
}
});
}
@ststeiger
Copy link

ststeiger commented Jun 1, 2017 •
edited
Loading

Necromancing.

I had the same problem, except this answer didn't work.

It may be because the code I have to work on works with iframes, but I don't now for sure.

On top, I couldn't update to the latest version, because it would break compatibility with the rest of the project I had to work on.

So this is what fixed it for me:

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 
}

@Drago37
Copy link

Drago37 commented Sep 13, 2017

thanks @ststeiger for IE11 i can resolve my problem now :)

Copy link

ghost commented Aug 29, 2019 •
edited by ghost
Loading

In case anyone has to run on an older jquery version, like me (1.11.1):

The original post's check for IE did not work for me and so I replaced it with

var userAgent = window.navigator.userAgent;
var msie = userAgent.indexOf('Trident/7.0');
var isIE = (msie !== -1) ? true : false;

If you need to tweak the search string to your needs, see if this thread can help

Note though, that browser sniffing via userAgent is usually not recommended, see MDN

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment