如何使用addmore函数javascript在表单中添加日期字段

Question

我必须使用添加更多图片添加多个日期字段，但是当我点击＆＃34;日期字段＆＃34;日历出现了。

但是当我添加更多日期字段（日期2，日期3 ......）时，日历字段中不会出现日历。

萤火虫没有错误。

我的代码在这里。请参考atachment.Calender没有显示在＆＃34;日期2＆＃34;文本字段。

    <script>
$(function() {
    $(".dp").datepicker();

  });

    fields = 2;
    function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;
        fields += 1;     
    }
    </script>   

    <div>
        <input id='date_1' class='dp' type='text' placeholder='Date'>  
        <a href="javascript:void(0);" id="addButton"  onclick="addInput();">
        <img src="img/addmore.png" width="" height="25px"></a>  
    </div>

    <div id="text" ></div>

Answer 1

在您的函数$(".dp").datepicker();中应用jquery函数addInput，如下所示

function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;

        $(".dp").datepicker(); // add this line

    }

更新2：

function addInput() 
    {    
        document.getElementById('text').innerHTML += "<div class='form-group' id='group_"+fields+"'><label class='col-sm-3 col-md-3 col-lg-2 control-label'>Date "+fields+":</label>  <input id='date_"+fields+"' class='dp' type='text' placeholder='Date'>    <input type='image' value='Remove'   src='img/remove.png' onclick='removerow("+fields+");' height='25px'></div></div>";
        document.getElementById('count_off').value=fields;

        $("date_"+fields).datepicker(); // add this line
        fields += 1;
    }

Answer 2

将Id分配给所有的datepicker字段可能会给你处理它带来问题。所以最好分配类并在类的帮助下完成所有的工作。我刚刚编写了添加datepicker的代码。

$(".dp").datepicker();

$(document).on('click', '.add', function() {
    var appendTxt = '<input class="dp"  type="text" /><button class="add">Add</button>';
    $("#container").append(appendTxt);
    $(".dp").datepicker();

});

HTML

<div id="container">
<input class="dp" type="text"></input><button class="add">Add</button>
</div>

SEE DEMO HERE