Question

**It's my cloned html element**
<pre>    
<input type="text" name="c_date[]" id="c_date1"class="form-control c_date comm"title='1'/><br/>
<input type="text" name="c_date[]" id="c_date2"class="form-control c_date comm"title='2'/><br/>
<input type="text" name="c_date[]" id="c_date3"class="form-control c_date comm"title='3'/></br/>
<input type="text" name="c_date[]" id="c_date4"class="form-control c_date comm"title='4'/>
</pre>

我已通过下面的代码

创建了唯一的ID名称

<code>
$("table tr").each(function(index){
      var s=index+i;
      $(this).find("td .c_date").attr('title',index+i);
      $(this).find("td .c_date").attr('id','c_date'+s);
});
</code>

我的日期时间插件代码...............

<code>
       $("table tr td .c_date").each(function(){
            var val_num = $(this).attr('title');
            $("#c_date"+val_num).datetimepicker({
                useCurrent:true,
                format:'YYYY-MM-DD'
            });
        });
</code>

我克隆了一个包含一些字段的表格行。其中一个＆＃34; c_date＆＃34;输入字段。它的数量会更多。我想在每个字段中设置日期时间选择器。在我的代码上面不起作用.........

Answer 1

您不需要任何循环来附加插件。这必须工作

$('.c_date').datetimepicker({
 useCurrent:true,
 format:'YYYY-MM-DD'
});

更新2 这必须奏效。首先，您必须销毁所有附加的datetimepickers，然后将其附加到类

＆＃13;

$(document).ready(function() {
$('.datepicker').datetimepicker();
  $('input[name="cmdAddRow"]').on('click', function() {
  	$('.datepicker').each(function(){
    $(this).data('DateTimePicker').destroy();
    });
    $curRow = $(this).parents('tr');
    rowIndex = $curRow.index() + 1;
    $newRow = $curRow.clone(true).find(".comm").val("").end();
    $curRow.after($newRow);
    $newRow.find('.datepicker').attr({
      id: rowIndex,
      title: rowIndex
    });
    $('.datepicker').datetimepicker();
  });
});

＆＃13;

td {
  position: relative;
}

＆＃13;

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script><style type="text/css"></style>
      <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
      <script type="text/javascript" src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<!-- padding for jsfiddle -->
<table>
  <tr>
    <td valign="top" width="30px;">
      <span class="id"></span>
    </td>

   
    <td valign="top" width="150px">
      <input class="form-control comm wtime" type="number" step="any" id="latbox" value="" min="0" max="20" name="w_time[]">
      <!--<span class="error">*</span>-->
    </td>
    <td>
      <select name="taskStatus[]" id="taskStatus" class="form-control comm">
        <option value="">Select Status</option>
        <option value="1">In Progress</option>
        <option value="2">Done</option>
        <option value="3">Pending</option>
      </select>
    </td>
    <td>
      <input type="text" name="c_date[]" class="form-control datepicker comm" />
    </td>

    <td valign="top" style="padding-left: 25px;">
      <input class="btn btn-danger" id="remove" type="button" value="Remove">
    </td>
    <td valign="top">
      <input class="btn btn-info" type="button" name="cmdAddRow" value="Add">
    </td>
  </tr>
</table>

＆＃13;

动态ID在Eonasdan日期时间选择器中不起作用

1 个答案: