DatePicker：当多个数组 id 时，无法设置未定义的属性“currentDay”

Posted 2023-05-07

【中文标题】DatePicker：当多个数组 id 时，无法设置未定义的属性“currentDay”

【英文标题】：DatePicker : Cannot set property 'currentDay' of undefined when multiple array id

【发布时间】：2016-04-05 04:34:53

【问题描述】：

动态行表中的日期选择器有问题。

如果输入字段的 id 插入索引（例如：price_date[0]），它是有效的。 如果没有索引（例如：price_date[]），则会产生错误 Cannot set property currentDay of undefined。 datepicker 已显示，但点击日期时会显示错误。 只有第一个 price_date[] 没有显示错误。

i = parseInt($('#counter').val());
$("#add_row").click(function()
  $('#addr'+i).html("<td align='right'>"+ (i+1) +"</td>\
<td class='col-xs-2'>\
<input type='text' name='harga_start_date[]' id='harga_start_date[]' class='datepick form-control' >\
</td>");	
  $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
  i++;
);
$("#delete_row").click(function()
  if(i> 1)
    $("#addr"+(i-1)).html('');
    i--;
  
);


$(document).on('focus',".datepick", function()
  $(this).datepicker(
    dateFormat : 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  );
); 

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<table class="table table-striped"  id="tab_logic">
  <thead>
    <tr>
      <td colspan="7">
        <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger btn-sm">Delete Row</a>
      </td>
    </tr>
    <tr class="success">
      <th class="text-center">No.</th>
      <th class="text-center">Start Date</th>
    </tr>
  </thead>
  <tbody >
    <tr id='addr0' class="itemsGroup">
      <td align="right">1
      </td>
      <input type="hidden" name="counter" id="counter" value=1> 
      <td class="col-xs-8">
        <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
      </td>
    </tr>
    <tr id='addr1'></tr>
</table>        

这是小提琴：https://jsfiddle.net/d4csw1kx/

【问题讨论】：

欢迎来到 SO。您在问题中的所有文字都与您提供的代码不匹配。请使用代码 sn-p 编辑器或 jsFiddle.net 创建一个真实示例

我已经用 fiddle link 更新，点击后第二行更新第一行

【参考方案1】：

如果我对问题的理解正确，有两件事你应该改变。

删除ids 属性（你已经知道了）。 这里的大问题是您在任何 focus 中初始化插件，而插件本身会处理它。

所以解决方案是分别初始化任何输入（第一个和下一个）（当页面加载时以及每次添加一行之后。

i = parseInt($('#counter').val());
$("#add_row").click(function () 
    var addr = $('#addr' + i).html("<td align='right'>" + (i + 1) + "</td>\
                        <td class='col-xs-2'>\
                          <input type='text' name='harga_start_date[]' class='datepick form-control' >\
                        </td>");
    $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
  attachDatepicker(addr.find('input'));
    i++;
);

$("#delete_row").click(function () 
    if (i > 1) 
        $("#addr" + (i - 1)).html('');
        i--;
    
);

function attachDatepicker(input) 
  input.datepicker(
    dateFormat: 'yy-mm-dd',
    changeMonth: true,
    changeYear: true
  );


attachDatepicker($('input'));

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" />

<table class="table table-striped"  id="tab_logic">
  <thead>
    <tr>
      <td colspan="7">
        <a id="add_row" class="btn btn-success btn-sm pull-left">Add Row</a><a id="delete_row" class="pull-right btn btn-danger btn-sm">Delete Row</a>
      </td>
    </tr>
    <tr class="success">
      <th class="text-center">No.</th>
      <th class="text-center">Start Date</th>
    </tr>
  </thead>
  <tbody >
    <tr id='addr0' class="itemsGroup">
      <td align="right">1
      </td>
      <input type="hidden" name="counter" id="counter" value=1> 
      <td class="col-xs-8">
        <input type="text" name="harga_start_date[]" id="harga_start_date[]" class="datepick form-control" >
      </td>
    </tr>
    <tr id='addr1'></tr>
</table> 

http://jsbin.com/yujeda/edit?html,js

【讨论】：

感谢 mosh-feu，我只是删除了 id，一切正常。