two jQuery UI datepickers in one form, 'missing instance data'

Question

I've got two date pickers in one form. They have different id's so this shouldn't be related to similar errors such as this one. jQuery. Apply selector to every field in a dynamic form

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

Which is triggered when I select a day from the '#copyTo' datepicker which is the second datepicker on the form. The first datepicker works perfectly.

The form I have is

<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>

The jquery is

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 would work, but not the second?

Answer 1

Two things come to mind:

One is in 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 that is looking for DOM element or document... not a string.

And the second thing is:

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

Copy To has type="test" and Copy From does not (though the default input type is text... so probably not that)

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()
    });
});