Two jQuery UI datepickers in one form, "missing instance data"

Question

I have two date pickers in one form. They have a different identifier, so this should not be related to errors like this one. jQuery Apply selector to each field in dynamic form

The error I get in firebug is 'uncaught exception: Missing instance data for this datepicker' parameter

Which is caused when I select a day from the datepicker '#copyTo', which is the second datepicker in the form. The first datepicker works fine.

Form i have

  <form name = "copy" action = "copyEvents.php" method = "post">
 <input type = "hidden" id = "copyFromHid" name = "copyFromHid" />
 <input type = "hidden" id = "copyToHid" name = "copyToHid" />
 Copy From <input id = "copyFrom" name = "copyFrom" />
 Copy To <input type = "text" id = "copyTo" name = "copyTo" />
 <input type = "hidden" name = "gid" id = "gid" />
 <input type = "submit" value = "copy" />
 </form>

jquery

jQuery('input#copyFrom','div#copyFromHistory form') .datepicker({ altField: 'input#copyFromHid', altFormat: 'yy-mm-d', dateFormat: 'd MM yy', firstDay: 1, beforeShowDay: function(date) { return (date.getDay() == 1) ? [true, ""] : [false, ""]; } }); jQuery('input#copyTo','div#copyFromHistory form') .datepicker({ altField: 'input#copyToHid', altFormat: 'yy-mm-d', dateFormat: 'd MM yy', firstDay: 1, beforeShowDay: function(date) { return (date.getDay() == 1) ? [true, ""] : [false, ""]; } }); 

Any suggestions as to why the first field will work, but not the second?

Answer 1

Two things come to mind:

One of your jQuery selectors:

 jQuery('input#copyFrom','div#copyFromHistory form') jQuery('input#copyTo','div#copyFromHistory form') 

In both cases, you pass the context / ownerDocument parameter to jQuery() , but this is looking for a DOM element or document ... not a string.

And the second:

 Copy From <input id="copyFrom" name="copyFrom"/> Copy To <input type="text" id="copyTo" name="copyTo"/> 

Copy To has type="test" , but Copy From does not (although the default input type is text ... so this is probably not the case)

I suspect you really want:

 jQuery('input#copyFrom').datepicker(....) jQuery('input#copyTo').datepicker(....) 

Answer 2

Easy to solve, change your code to something like this:

 $('.date').live('focus', function(){ $(this).datepicker({ changeMonth: true, changeYear: true, yearRange: '1930:'+(new Date).getFullYear() }); });