Question

I have a form that uses jQuery’s datepicker(). That works fine.

Now, I’m adding in inline editing capabilities for my users. However, the datepicker() isn’t returning a value to the editable field.

The script:

<script>
    $(function() {
       $("td[id^=rowDate]").click(function() {
           $(this).html('<input type="text" name="editStartDate" value="" class="editStartDate" />');
           $(".editStartDate").datepicker();       
       });
    });
</script>

I’m not sure if it matters, but I also call the datepicker() after this function to handle a separate task:

<script> $(".startDate, .endDate").datepicker(); </script>

I want the datepicker() to return a new value to #editStartDate What am I doing wrong?

Answer 1

clean approach:

$(function() {
   $("td[id^=rowDate]").click(function() {
        // if there is already an input-field in this TD, return...
        if($(this).find('input').length > 0)
            return;

        // else create new input-field-object
        $('<input type="text" name="editStartDate" />')
            .addClass('editStartDate') // add the corresponding class (not useful anymore, but for completeness)
            .appendTo(this) // append that to the TD
            .datepicker(); // run the datepicker
   });
});