Javascript – jquery datepicker and jquery mask not working

datepickerjavascriptjqueryjquery-uimaskedinput

I have this piece of code that uses jquery datepicker and jquery masked input.

jQuery(function($) {
    $(document).on('click', '#date', function () { 
        var me = $("#date");   
        me.datepicker({
            showOn: 'focus',
            altFormat: "mm/dd/yy",
            dateFormat: "mm/dd/yy",
            minDate: '12/12/2000',
            maxDate: '12/12/2020'
        }).focus();
        me.mask('99/99/9999');
    }).on('select', '#date', function () {
        var me = $("#date");
        me.mask('99/99/9999');
    });
});

JSFiddle

The code uses jquery on because the input element in the application is dynamically added into the page. And the masked input is also registered from select event because user can come to the input by pressing tab from previous input.

It doesn't work on Firefox 31, but it works fine on Chrome 36 and IE 11.
When the input field is empty, user should be able to type anything (based on masked filter) in the input element.

Kindly suggest me what's wrong with the code.

Best Solution

Just fixed it by changing the select into focus, I can't remember why I used select in the first place.

jQuery(function($) {
    $(document).on('click', '#date', function () { 
        var me = $("#date");   
        me.datepicker({
            showOn: 'focus',
            altFormat: "mm/dd/yy",
            dateFormat: "mm/dd/yy",
            minDate: '12/12/2000',
            maxDate: '12/12/2020'
        }).focus();
    }).on('focus', '#date', function () {
        var me = $("#date");
        me.mask('99/99/9999');
    });
});

Fixed JSFiddle