如何在动态创建的行中添加日期选择器

Question

我被困在一个查询中并且它不起作用。 当我们单击add Row 按钮时，我在表格行中创建了一些输入文本框和一个按钮以添加具有相同输入文本框的新行。

代码如下：

<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">

这是我们点击添加按钮时添加新行的 JQuery 代码

 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;

        }
      }
    }

我正在使用jQuery-ui datepicker 从文本框中选择日期。 这是datepicker代码

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

当我单击不是由动态创建的第一个文本框时，它会显示日历并选择日期。 但是问题是当我单击添加按钮并创建同一行然后如果我选择文本框则它不会显示任何日历。我该如何解决这个问题..请帮助找到解决方案。 当我通过检查元素看到时，它会显示带有hasDatepicker的类名

这里是创建[fiddle][1]请看

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

Answer 1

@M.Tanzil ：您的代码中有一个错误。

1) 首先在第一个日期选择器中选择一个日期。

2) 然后添加一个新行。

3) 然后在第二行选择一个日期。

第二个选定的日期将添加到第一行。

我已经解决了这个问题。问题来了，因为所有日期选择器都具有相同的 ID。我为日期选择器分配了动态 ID。

请查看Fiddle。

Answer 2

您提供的小提琴中的javascript 代码中有很多错误。您还必须在创建要绑定datepicker 的输入的函数之后添加initialize datepicker。

此外，当您添加一行时，销毁所有日期选择器实例，然后 追加新行后重新绑定datepicker。

请查看 modified Fiddle 的工作原理。

注意：所有新创建的rows 和里面的输入都将显示datepicker，但是当您在任何row 中选择日期时，selected date 将显示在top most row（如果输入具有相同的类）所以你也必须管理它。尝试使用不同的类或具有唯一 ID。

希望对您有所帮助。

Answer 3

从 javascript 创建行时删除 idsassigned_date 和 last_date，这是基本规则 id 不应该在 html 中重复。

使用下面的代码

<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">

如果您使用 datetimepicker 初始化，请使用下面的类作为标识符

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

Answer 4

您应该验证您的 js 代码以及为什么不尝试使用输入类型 date：

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

Answer 5

作为建议： 确保在创建新元素后从文本框中选择日期。！