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 e 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.

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 e 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.

• javascript
• jquery
• jquery-ui
• datepicker
• maskedinput

Share Improve this question Follow edited Aug 5, 2014 at 10:43 Yuliam Chandra asked Aug 5, 2014 at 10:32 Yuliam ChandraYuliam Chandra 14.7k1212 gold badges5555 silver badges6969 bronze badges 2

• 1 Try this jsfiddle/6Z2Ws/2 – Aamir Afridi Commented Aug 5, 2014 at 11:05
• 1 @AamirAfridi, I appreciated the help, but the mask is also required when the input is activated from another input (e.g. pressing tab from previous input), anyway I already solve it, thx – Yuliam Chandra Commented Aug 5, 2014 at 11:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 0

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