Learning jQuery

Well, looking at the post title doesn't give you an idea about what the post is all about but that's best possible title I could think and come up with. "jQuery UI DatePicker, IE 7 and an extra comma" combination can give you some pain. Why? Let's see through a piece of code.

Below jQuery code attaches jQuery UI Datepicker widget to an input element "txtDate" and some options are also set.

$(document).ready(function() {
    $('#txtDate').datepicker({
        showAnim: 'slide',
        dateFormat: 'dd-mm-yy',
    });
});?

If you are currently reading this post in IE 7 or lower version, then you will notice that this demo is not working. But if you see the below demo in other browsers (Chrome, firefox or even IE8) the demo seems to working like charm.

Copy the link "http://jsfiddle.net/jquerybyexample/JkTra/embedded/result" and check this demo in other browsers.

See result below

Oh!!! Even I was scratching my head for few minutes. So why it is not working in IE7? If you had seen the jQuery code clearly then you must have notice that there is an extra comma just after "dateFormat: 'dd-mm-yy'" option. This extra comma is culprit. Just remove the comma and code will work fine in IE7 as well.

$(document).ready(function() {
    $('#txtDate').datepicker({
        showAnim: 'slide',
        dateFormat: 'dd-mm-yy'
    });
});?

I don't know the reason why this is happening but this is weird and weird things can happen with IE browsers. I am not sure who is culprit. The extra comma or "IE7"? Decide yourself.. :)

Feel free to contact me for any help related to jQuery, I will gladly help you.