JQuery Datepicker only works in IE8 (no Firefox, no chrome for me)

Question

Ok so I'm not very familiar with Jquery as to know the possible cause of this, but I've been assigned to find out why the datepicker doesn't work porperly on a client's computer (it prints out the date without slashes like this: 24112008

So when I test the webform, I see it doesnt even pop up in Firefox (the client's browser too) nor chrome, only in IE8.

In the scriptManager we have:

   <script src="http://www.website.com/Script/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.website.com/Script/jquery-ui.min.js" type="text/javascript"></script>   
    <script src="http://www.website.com/Script/jquery-ui-i18n.min.js" type="text/javascript"></script>  

and in the webform:

            $(function pageLoad(sender, args) {

            // Datepicker
            $.datepicker.setDefaults($.extend({ showMonthAfterYear: false }, $.datepicker.regional['']));
            $(".dates").datepicker($.datepicker.regional['es']);
        });

The textbox that uses it goes like this:

<asp:TextBox ID="txtFeNac"  CssClass="dates" style="margin-left: 7px" runat="server" ></asp:TextBox>

Answer 1

I'm not sure if this relates to your problem or if it's just a piece of confusion on my part: should you have a element that adds the jquery.datepick.js file (or other file with the datepicker plugin) to your page?

I don't see it in your code samples. Is it packaged with jquery-ui in your case?

Answer 2

I'm not familiar with regionalizing the datepicker but I'll try to help. What do you mean by "it prints out the date without slashes"? The datepicker only runs on the client, so the date format when the page loads is set in the code-behind file when the field is populated or through data binding.

jQuery is usually initialized in $(document).ready or pageLoad in ASP.NET (if there's an update panel present). I'm not sure what the effect of "$(function pageLoad(sender, args)" will be.

I would start by changing the client side code to the following then working in the 'es' regionalization once that works.

$(document).ready(function() {
    $('.dates').datepicker({ showMonthAfterYear: false, onSelect: function() {} });
});

The onSelect: function() {} option works around a bug in IE or FF, I don't remember which.