Question

I need to have a datetimepicker to popup onclick of the date input fields, the date pickers are defined in a javascript function like this:

  function loadcalendar(){
   jQuery(function() { 
                            $('#ar_startdate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                              });
                            $('#ar_enddate').datetimepicker({ 
                                dateFormat: 'yy-mm-dd',
                                showSecond: true,
                                timeFormat: 'hh:mm:ss'
                             });
          });
 } 

now I am calling load calendar when I populate the input fields into table row dynamically just after they are appended as rows to a table
Something like this:

// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
    $("#table_newrole img.move-row").live("click", function() {
     $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" id="ar_startdate"></td><td>End Date: <input type="text" value="" id="ar_enddate </td></tr>');
   loadcalendar();

With the above setup the datepickers get displayed only in first iem as right all input text fields share the same id, so how do I create an id from an index and associate each with the datepicker after that row is appended .
Regards,
Priyank

Answer 1

Make sure you always have only 1 element with certain ID. If you’re going to add several rows, you need to use classes instead. Try this:

 function loadcalendar(){
       $('.ar_startdate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
       $('.ar_enddate:not(.parsed)').datetimepicker({ 
           dateFormat: 'yy-mm-dd',
           showSecond: true,
           timeFormat: 'hh:mm:ss'
       }).addClass("parsed");
 } 
// when a image in table_newrole is clicked the input fields are appended as a row in table_rolecart, below is the js code
 $(document).ready(function() {
     $("#table_newrole img.move-row").live("click", function() {
         $("#table_rolecart tbody").append('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
         loadcalendar();
     });
 });

I’ve added .parsed to check if input had already been converted. I don’t know what does the plugin you’ve chosen, but just in case. Anyway there are other ways to achieve this same thing such as:

 var config = {
     dateFormat: 'yy-mm-dd',
     showSecond: true,
     timeFormat: 'hh:mm:ss'
 };
 var newRowAndBind = function(){
     var row = $('<tr><td>Start Date: <input type="text" value="" class="ar_startdate"></td><td>End Date: <input type="text" value="" class="ar_enddate </td></tr>');
     row.find(".ar_startdate").datetimepicker(config);
     row.find(".ar_enddate").datetimepicker(config);
     row.appendTo("#table_rolecart tbody");
 };
 $(document).ready(function() {
     $("#table_newrole img.move-row").bind("click", newRowAndBind);
 });