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

Question

我必须使用添加更多图像来添加多个日期字段，但是当我单击“日期字段”时会出现日历。

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

firebug 中没有错误。

我的代码在这里。请参阅附件。日历未显示在“日期 2”文本字段中。

    <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

将Id 分配给所有日期选择器字段可能会给您带来处理问题。因此最好分配类并在类的帮助下完成所有工作。我刚刚编写了添加日期选择器的代码。

$(".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

Answer 2

像这样在你的函数addInput中应用jquery函数$(".dp").datepicker();

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