how to add datepicker in dynamically created row

Question

I am stuck in a query and its not working. I created some input textboxes in table row and one button to add new row with same input textboxes when we click on the add Row button.

Here is the code:

<table>
<tr>
<td><input type="text" name="assigned_date[]" value="" id="assigned_date" class="assigned_date" />
  <span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
</td>
<td><input type="text" name="last_date[]" value="" id="last_date" class="last_date" />
  <span class="text-danger"><?php echo form_error('last_date[]');?></span>
</td>
<td><input type="text" name="priority[]" value="" />
  <span class="text-danger"><?php echo form_error('priority[]');?></span>
</td>
<td><input type="text" name="frequency[]" value="" />
  <span class="text-danger"><?php echo form_error('frequency[]');?></span>
</td>
</tr>
</table>
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" />
<input class="btn btn-primary" type="submit" name="submit" value="submit">

Here is the JQuery code to add new row when we click on the add button

 function addRow(tableID) {

      var table = document.getElementById(tableID);

      var rowCount = table.rows.length;
      var row = table.insertRow(rowCount);

      var colCount = table.rows[1].cells.length;

      for(var i=0; i<colCount; i++) {

        var newcell = row.insertCell(i);

        newcell.innerHTML = table.rows[1].cells[i].innerHTML;
        //alert(newcell.childNodes);
        switch(newcell.childNodes[0].type) {
          case "text":
              newcell.childNodes[0].value = "";
              break;
          case "checkbox":
              newcell.childNodes[0].checked = false;
              break;
          case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;

        }
      }
    }

I am using jQuery-ui datepicker to select date from textbox. Here is datepicker code

$('.assigned_date').each(function(){
    $('.assigned_date').removeClass('hasDatepicker').datepicker();
});

When I click the first textbox which is not created by dynamically then it show the calendar and select the date. But The Problem is when I click on the add button and it create same row and then if I select the textbox then it not show any calendar. how I can solve this problem..Please help to find the solution. When I see by inspect element then it show the class name with hasDatepicker

Here is created [fiddle][1] please see

https://jsfiddle.net/r83vmv1q/3/

is it possible to create a jsfiddle with your code. so we can test it easily. — Aneesh Sivaraman, Aug 09 '16 at 10:20
@Aneesh Sivaraman ..I update my question with fiddle.. you can see by clicke the following link https://jsfiddle.net/r83vmv1q/1/ — iazizkhan, Aug 09 '16 at 10:33

score 3 · Accepted Answer · answered Aug 09 '16 at 14:16

@M.Tanzil : There is a bug in your code.

1) First select a date in first date picker.

2) Then add a new row.

3) Then select a date in second row.

Second selected date will added to the first row.

I have fixed this issue. The issue is coming because of all the datepickers have same id. I have assign dynamic id's for datepickers.

Please check this Fiddle.

M.Tanzil · Answer 2 · 2016-08-09T11:24:51.920

1

You have a lot of mistakes in your javascript code in the fiddle you provided. Also you have to initialize the datepicker after the functions which creates the inputs you want to bind datepicker with.

Also when you add a row, destroy all the datepicker instances and then rebind the datepicker after you append a new row.

Please see the modified Fiddle its working.

NOTE: All the newly created rows and the inputs inside will display the datepicker but when you select date in any of the row the selected date will be displayed in the top most row (if inputs having the same classes) so you have to manage that as well. Try using different classes or with unique IDs.

Hope it helps.

edited Aug 09 '16 at 11:24

answered Aug 09 '16 at 10:41

M.Tanzil

1,987
1
12
28

Thats my problem .When I click on add button and it create dynamic row so I also want datepicker selection in Dynamic row – iazizkhan Aug 09 '16 at 10:46
Ok that issue also been solved. you can check now :) – M.Tanzil Aug 09 '16 at 11:01
Please can you explain me where you change the code and where is the problem so I can understand properly – iazizkhan Aug 09 '16 at 11:02
You will see in `AddRow` function at the top i added two lines to destroy the instances of `datepicker`, and at the end of `AddRow` function i `reinitialize the datepicker`. so that the newly created rows can also be initialized with it, and thats it. – M.Tanzil Aug 09 '16 at 11:11
its not working .when we click second row and select then it changes only in first row not showing in second row..please check the fiddle – iazizkhan Aug 09 '16 at 11:20
For that i have given a `NOTE` in my answer. – M.Tanzil Aug 09 '16 at 11:24
@xr33dx : I have updated the answer of M.Tanzil. Please check updated answer. – Aneesh Sivaraman Aug 09 '16 at 14:18

score 1 · Answer 3 · answered Aug 10 '16 at 05:19

remove ids assigned_date and last_date as you creating rows from javascript, it's basic rule id's shouldn't get repeated in html.

use below code

<table>
<tr>
<td><input type="text" name="assigned_date[]" value=""  class="assigned_date datetimepick" />
  <span class="text-danger"><?php echo form_error('assigned_date[]');?></span>
</td>
<td><input type="text" name="last_date[]" value=""  class="last_date datetimepick" />
  <span class="text-danger"><?php echo form_error('last_date[]');?></span>
</td>
<td><input type="text" name="priority[]" value="" />
  <span class="text-danger"><?php echo form_error('priority[]');?></span>
</td>
<td><input type="text" name="frequency[]" value="" />
  <span class="text-danger"><?php echo form_error('frequency[]');?></span>
</td>
</tr>
</table>
<input class="btn btn-primary" type="button" value="Add Row" onclick="addRow('dataTable')" id="add_button" />
<input class="btn btn-primary" type="submit" name="submit" value="submit">

and if you using datetimepicker initialization use below class as identifier

$('.datetimepick').datetimepicker({
    format:"Y-m-d H:i",
    timepickerScrollbar:false,
    minDate: 0
});

score 0 · Answer 4 · answered Aug 09 '16 at 10:43

0

you should verify your js code and why you don't try to use the input type date :

[<input type="date">][1]

answered Aug 09 '16 at 10:43

i prefred datepicker .. date function its not look good in text box – iazizkhan Aug 09 '16 at 10:45

score 0 · Answer 5 · answered Aug 09 '16 at 10:52

0

as an advice : be sure that you to select a date from textbox after the creation of the new element.!

answered Aug 09 '16 at 10:52

how to add datepicker in dynamically created row

5 Answers5