Question

when our event edit page is loaded, there are two date fields where the jquery datepicker is used and the picker also appears when I click on one of these fields.

datepicker is initialized when the document is loaded.

$ ->
  $(':input.date').datepicker(dateFormat: 'dd.mm.yy')

and the class ‘datepicker’ is added automatically

<input class="span1 date hasDatepicker" id="event_application_opening_at" name="event[application_opening_at]" size="30" type="text">

because it’s possible to add other dates to an event, we’re creating additional, nested date fields when the user clicks on the “Add Date” link.

Although the “hasDatepicker” class is assigned to these fields correctly, the datepicker doesn’t work on these newly created ones. It looks like this happens because the datepicker is initalized already. I tried to apply the destroy() function and then to re-initalize datepicker on the whole page content, but this didn’t work.

Anyone out there who can help me with that?

Answer 1

Try this

 $(":input.date").live("click", function(){
        $(this).datepicker({ 
            dateFormat: 'dd.mm.yy' 
        });
    });

update:

$(":input.date").live("click", function(){
            $(this).datepicker({ 
                dateFormat: 'dd.mm.yy' 
            });
          $(this).datepicker('show');

        });