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

Posted 2023-05-07

【中文标题】如何在动态创建的行中添加日期选择器

【英文标题】：how to add datepicker in dynamically created row

【发布时间】：2016-12-15 06:51:04

【问题描述】：

我被困在一个查询中并且它不起作用。 当我们单击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/

【问题讨论】：

嘿，有没有可用的

是否可以用您的代码创建一个 jsfiddle。所以我们可以很容易地测试它。

@Aneesh Sivaraman ..我用小提琴更新了我的问题..您可以通过单击以下链接查看jsfiddle.net/r83vmv1q/1

【参考方案1】：

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

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

2) 然后添加一个新行。

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

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

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

请查看Fiddle。

【参考方案2】：

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

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

请查看 modified Fiddle 的工作原理。

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

希望对您有所帮助。

【讨论】：

这是我的问题。当我点击添加按钮并创建动态行时，我还希望在动态行中选择日期选择器

好的，这个问题也解决了。你现在可以检查:)

请您解释一下您在哪里更改代码以及问题出在哪里，以便我能正确理解

您将看到在顶部的AddRow 函数中我添加了两行来销毁datepicker 的实例，并在AddRow 函数的末尾添加了reinitialize the datepicker。这样新创建的行也可以用它来初始化，就是这样。

它不起作用。当我们单击第二行并选择时，它仅在第一行发生变化，而不在第二行显示。请检查小提琴

【参考方案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
);

【参考方案4】：

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

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

【讨论】：

我更喜欢 datepicker .. 日期函数在文本框中看起来不太好

【参考方案5】：

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