jQuery UI Datepicker and Google Chrome not working

Question

I'm having some problems with jQueryUI Datepicker and Google Chrome. My datepicker is working as expected with IE8, Firefox and Safari. The problem is when clicking the datepicker connected textbox in Chrome. It gives me a crash page, "Oops, an error occurred...". On my page there's textbox with a datepicker. The datepicker is language dependent and it loads the correct language settings dynamically. The datepicker should also display the month and year dropdowns. The code is as follows

$(function() {
    $.datepicker.setDefaults($.extend({ changeMonth: true, changeYear: true }, $.datepicker.regional['']));

    $('#<%= TextBoxBirthDate.ClientID %>').datepicker($.datepicker.regional[$('#LabelRegionalSettings').val()]);});

If I only extend the datepicker with one option, i.e. changeYear, it works in Chrome. But if I add another option, i.e. changeMonth, the 'crash' in Chrome occurs.

Is my code incorrect? If so, how do I fix it?

Any help is greatly appreciated!

---

I've updated the code to make it more readable. But still Chrome crashes on me if I add the changeMonth option.

$(function() {
    $.datepicker.setDefaults($.datepicker.regional['']);
        $('#<%= TextBoxBirthDate.ClientID %>').datepicker($.datepicker.regional[$('#LabelRegionalSettings').val()]);<br />
        $('#<%= TextBoxBirthDate.ClientID %>').datepicker('option', 'changeMonth', true);
        $('#<%= TextBoxBirthDate.ClientID %>').datepicker('option', 'changeYear', true);
        $('#<%= TextBoxBirthDate.ClientID %>').datepicker('option', 'yearRange', '-50:+0');
    });

Anyone got any ideas of what might cause Chrome to crash?

Answer 1

actually...heres my solution: theres some issue with the width of the year select element the exact line in the css is the next: .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 49%;}

if you change it to some non percentage value it fixes it... something like this: .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 75px;}

hope it helps, marcelo

Answer 2

FIXED!

i had the same problem.. i actually found it to be a problem with the CSS files I was using.. namely:

jquery.ui.core.css
jquery.ui.theme.css
jquery.ui.datepicker.css

i have no idea why this is.. debugging in chrome isn't as pleasant as firefox.. but my simple fix was to redownload the theme i wanted and that fixed the problem.

hope that helps

j

---

i'm having the same problem.. anyone have a fix yet? someone posted a potential work around here: http://groups.google.com/group/jquery-ui/browse_thread/thread/1ea5315618087a9d?pli=1

(by wrapping a setTimeout around what the user identified as the problem, but this didn't work for me either.)