CODEWITHSUNDEEP
jqueryhtmlcss
iazizkhan
iazizkhan

Reputation: 322

how to add datepicker in dynamically created row

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/

Upvotes: 4

Views: 6300

Answers (5)

Golduno Support
Golduno Support

Reputation: 191

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
});

Upvotes: 1

Aneesh Sivaraman
Aneesh Sivaraman

Reputation: 931

@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.

Upvotes: 3

M.Tanzil
M.Tanzil

Reputation: 1995

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.

Upvotes: 1

user5938573
user5938573

Reputation:

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

Upvotes: 0

user5938573
user5938573

Reputation:

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

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

Upvotes: 0

Related Questions