Datepicker returning uncaught typeError: undefined 'currentDay'

I've been using jQuery UI with Bootstrap and I seem to run into a problem that I haven't had before. I'm not sure what has changed; I've tried setting back different version of jQuery and I didn't update the jQuery UI in the meanwhile. So I'm not exactly sure what broke.

The error from the console when I click on any date in the datepicker returns:

Uncaught TypeError: Cannot set property 'currentDay' of undefined 

The code is fairly straightforward as one would expect from a datepicker:

$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy'
}); 

With the following HTML:

<input type="text" class="datepicker" />

Is this a bug that should be reported (since no other Google matches turn up) or is it something else I've missed?

Solution 1:

I've found the solution. After a long time of debugging I figured out that there was a <div> that had the exact same ID, lying higher than the input field. Therefore the script took the first instance that contained the ID and picked the DIV instead of the input field.

I removed/renamed the DIV and it worked fine again.

Solution 2:

The above jQuery datepicker error is generally caused by having a duplicate controls with the same ID, no matter whether you use id or another selector like css class or field name to instantiate it.

Solution 3:

I solved this with create new ID for HTML DOM object. There is duplicated Id. Try to add new ID for HTML DOM object.

Solution 4:

I was having this error also. I found that elsewhere on the form I had some label 'for' attributes that did not match ids on the form inputs - seems like this might confuse datepicker too. Once I fixed those up, everything worked fine and the error went away. Take Andreas' advice (+1 for that!) and validate your forms - Chris Pederick's Web Developer Toolbar gives you an easy way to validate as you go.