Question

Found a peculiar bug indeed.

Datepicker works normally as expected until I load an object via AJAX and then attach the datepicker to it like so :

    $(".object").datepicker({
    showOn: 'both',
    buttonImage: '/images/icons/silk/calendar.png',
    dateFormat: "mm/dd/yy",
    changeMonth: true,
    changeYear: true,
    buttonImageOnly: true,
    yearRange: "2010:2030"
    onSelect: function(dateText, inst) {
      console.log('this was tapped.');
      console.log(dateText);
      console.log(inst);
    }
    })

If I click on the input or icon, the datepicker pops up. But if I select anything, the datepicker closes, and the date in my input does not change.

Update

Even stranger. I updated with the console.log calls above, and they all return properly. Yet the date within my input does not change.

Update

I think what might be happening here is that there are several common divs on the page with the same unique ID since its a self clone-able form.

Update

Here is the bug recreated in JSFiddle : http://jsfiddle.net/vMhrg/

Answer 1

It seems to be an issue with you having duplicate IDs. ID can not be used more then once a page, consider adding a counter (as I do in the fixed code) or remove it entirely if you can.

http://jsfiddle.net/vMhrg/1/

Code (everything else is the same):

<input type="text" value="05/08/2012" size="10" rel="Recurring End Date" name="task[scheduled_at]" id="task_scheduled_at_1" class="date-single-view">

<br />
<br />
<div class="item">
<input type="text" value="05/08/2012" size="10" rel="Recurring End Date" name="task[scheduled_at]" id="task_scheduled_at_2" class="date-single-view">
</div>

​