当我单击添加更多按钮时，添加了新的日期选择器字段，之前的日期选择器值被重置答案

【问题标题】：When i click on add more button the new datepicker field is added the previous datepicker value is reset当我单击添加更多按钮时，添加了新的日期选择器字段，之前的日期选择器值被重置
【发布时间】：2017-04-03 16:06:50
【问题描述】：

问题是，当我单击 “添加按钮” 时，添加了新的 datepicker 字段，该字段默认显示当前日期以及何时我手动更改日期并单击添加按钮，然后它将重置所有日期选择器中的默认值。

我的代码如下：

<div class="form-group row">
  <label for="example-date-input" class="col-2 col-form-label" style="margin-left:28.5%;">DATE</label>
  <div class="col-10">
    <input class="form-control datepicker pick" id="date[]" name="date[]" value="<?php echo $_POST['date'] ?>" style="" type="text" readonly>
  </div>
</div>

<div class="form-group">

<div class="col-md-8 col-sm-12 col-24">
    <div class="input_fields" style="color:black">
         <button class="add_field btn " onclick="incrementValue()" style="">Add More</button>
         <div>
         <input type="text" name="mytextt[]" hidden="" ></div>
</div>
</div>
</div>

javascript:

 $(document).ready(function() {
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields"); //Fields wrapper
var add_button      = $(".add_field"); //Add button ID
var wrapper_pre1         = $(".present_fields_1"); //Fields wrapper
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();

    if(x < max_fields){ //max input box allowed
        x++; //text box increment
 $(wrapper).prepend('<div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date[]" name="date[]" style="" type="text"></div></div>');$( ".datepicker.pick" ).datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});});

【问题讨论】：

因为您使用类名来重置日期。所以类名.datepicker.pick 的所有输入都将被重置。我认为您的 JQuery 有问题。如果.datepick("setDate", "0") 设置日期，那么所有设置都将设置，因为您使用的是类名。为什么.datepicker.pick
我应该指定不同的类名吗？ @webDev
当您单击添加更多并根据该 ID 重置值时，您应该能够为每个输入区域创建唯一 ID。或者，如果您想使用类将日期设置为输入区域，请不要重置该值。
正确使用你的类名，不要使用.datepick("setDate", "0")重置输入框。
我想将当前日期显示为默认输入值，所以我使用了这个 .datepick("setDate", "0") @webDev

标签： javascript php jquery css datepicker

【解决方案1】：

因此，根据您的要求，通过将计数或其他变量附加到 ID 来为每个字段（输入框）创建唯一 ID。并使用不使用类的 ID 创建您的 JS。所以不会影响其他输入框。
像这样的东西，请参阅框的 ID 和日期选择器方法

$(wrapper).prepend('<div class="form-group row"><label for="example-date-input" class="col-2 col-form-label date">DATE</label><div class="col-10 col"><input class="form-control datepicker pick" id="date_'+x+'" name="date[]" style="" type="text"></div></div>');$( "#date_"+x ).datepick({dateFormat: 'dd/mm/yyyy'}).datepick("setDate", "0");}});});

请注意 ID 实现。

重要提示：请查看使用类和ID的区别。

Difference between class and ID

JQuery Selectors-w3school

How do I select an item using class or ID?

【讨论】：