복제 된 행에 bootstrap-datepicker를 사용할 수 없습니다. 항상 첫 번째 날짜 필드에 값을 유지하십시오.

Question

bootstrap-datepicker 및 부트 스트랩을 사용하여 행을 복제하려고 할 때이 문제점을 발견했습니다.

재현 단계 : 1. 첫 번째 입력 날짜 (id_form-0-expense_date_item)를 선택하면 사용자가 날짜를 선택할 수 있습니다. 2. 다른 행을 추가하고 두 번째 입력 날짜 사용자를 선택하면 datepicker가 다시 표시되지만 날짜가 선택 값이면 첫 번째 입력 필드로 이동합니다. id_form-0-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 추천으로 나는 false로 클론 (true)를 변경 한하고 아래와 같이 새 행에 날짜 선택기를 다시 초기화 한 . 하지 "같은 분야에 항상 유지"무엇

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, 
    }); 

})