Question

尝试使用bootstrap-datepicker和bootstrap克隆行时发现了这个问题。

重现的步骤： 1.选择第一个输入日期（id_form-0-expense_date_item）后，用户可以选择日期。 2.使用日期选择器再次显示添加另一行并选择第二个输入日期用户，但是当日期为选择值时，将转到第一个输入字段。 id_form-O-expense_date_item

我可以克隆行，但日历日期始终位于第一个字段（id_form-0-expense_date_item）。使用jQuery UI 1.10.3时，它工作正常。

示例：http://jsfiddle.net/uoyzbwro/9/

<table id="id_forms_table" border="0" cellpadding="0" cellspacing="5">
   <thead>
      <tr>
         <th scope="col">&nbsp;</th>
         <th scope="col">Property name</th>
         <th scope="col">&nbsp;</th>
         <th scope="col">&nbsp;</th>
      </tr>
   </thead>
   <tbody>
      <tr id="form-0-row" class="dynamic-form">
         <td> 
   <input class="datepicker" id="id_form-0-expense_date_item" name="form-0-expense_date_item" type="text" />
         </td>
         <td> Column </td>
         <td> Contains </td>
         <td>
            <a id="remove-form-0-row" href="javascript:void(0)" class="delete-row">delete row</a>
         </td>
      </tr>
   </tbody>
</table>
<div>
<button>Add Row</button>
  </div>

===

<!--

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
            startDate: new Date()
     });

 })

function updateElementIndex(el, prefix, index){
     var id_regex = new RegExp('(' + prefix + '-\\d+)');
     var replacement = prefix + '-' + index;
     if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));    
     if (el.id) el.id = el.id.replace(id_regex, replacement);
     if (el.name) el.name = el.name.replace(id_regex, replacement);    

}

var i = 1;
$("button").click(function() {
    //Destroy datepickers
    $('.datepicker').datepicker('destroy');
    myTr = $("#id_forms_table tbody tr:first").clone(true).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
    myTr.removeClass('hasDatepicker').find("input").each(function() {
        $(this).attr({
            'id': function(_, id) { return id + i },
            'name': function(_, name) { return name + i },
            'value': ''
        });
    });
    //myTr.find('input[id^="datep"]').addClass("mydatepickers");
    $(".datepicker").datepicker();
    i++;
});

$(document).on('click', '.delete-row', function() {
    $(this).closest("tr").remove();
    return false;
});



 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
            startDate: new Date()
     });

 })


 //-->

Answer 1

根据charlietfl的建议，我已将clone（true）更改为false，并在新行上重新初始化了datepicker，如下所示。

http://jsfiddle.net/uoyzbwro/11/

 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })

function updateElementIndex(el, prefix, index){
     var id_regex = new RegExp('(' + prefix + '-\\d+)');
     var replacement = prefix + '-' + index;
     if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));    
     if (el.id) el.id = el.id.replace(id_regex, replacement);
     if (el.name) el.name = el.name.replace(id_regex, replacement);    

}

var i = 1;
$("button").click(function() {
    //Destroy datepickers
    $('.datepicker').datepicker('destroy');
    myTr = $("#id_forms_table tbody tr:first").clone(false).appendTo("table");
    //Remove classes datepickers
    //myTr.removeClass('hasDatepicker').find("input");
    updateElementIndex(myTr, 'form', 1); 
    myTr.removeClass('datepicker').find("input").each(function() {
        $(this).attr({
            'id': function(_, id) { return id + i },
            'name': function(_, name) { return name + i },
            'value': ''
        });
    });
    //myTr.find('input[id^="datep"]').addClass("mydatepickers");
    $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });
    i++;
});

$(document).on('click', '.delete-row', function() {
    $(this).closest("tr").remove();
    return false;
});



 $(function() {
     // datepicker plugin
     $(".datepicker").datepicker({
         changeMonth: true,
         changeYear: true,
         // You can put more options here.
                     autoclose: true,
     });

 })

无法在克隆的行上使用bootstrap-datepicker。值始终保留在第一个日期字段中

1 个答案: