JQuery 用于动态创建日期输入的日期选择器函数

Question

我正在尝试将 jquery 的日期选择器用于动态表单字段。这是我的 fiddle 显示的问题。

下面是我的代码

<div class="box-body" id="collapse1">
 
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label>
          <red>*</red>
          Full Name (As on NRIC/FIN)
        </label>
        <input type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>
          <red>*</red>
          Gender
        </label>
        <div class="radio row">
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" id="male"> Male
            </label>
          </div>
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" id="female"> Female
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          Date Of Birth (DD-MM-YYYY)
        </label>
        <input type="text" name="date" class="datepicker">
      </form-group>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          NRIC / FIN
        </label>
        <input type="text" class="form-control">
      </form-group>
    </div>
  </div>
</div>



<div id="parent" class="col-md-3">
  <div id="child" class="col-md-3">
  </div>
</div>
<br />
<div>
  <button type="button" onclick="addInputLine()">
    press
  </button>
</div>

重现步骤：

点击“按下”按钮
出现带有第二个日期输入的新 div

预期结果：能够为创建的 x 个日期输入字段选择日期

实际结果：在第二个输入字段上选择日期更新第一个字段

我尝试过的方法：我应用了这个 page 的解决方案，它对我不起作用

我想对用户动态创建的任意数量的输入执行此操作。感谢您的帮助！

Answer 1

您可以使用 clone() 克隆您的 collapse1 div 。然后，每当用户单击 press 按钮时，只需使用 .append() 在您的 parent div 中添加新的 div，然后使用 [=18= 初始化您的日期选择器]

演示代码 :

$(function() {
  var target = $("#collapse1").clone(); //keep clone..for further use
  $(".datepicker").datepicker({
    dateFormat: "dd-mm-yy"
  });
  //on click of press
  $(".press").on("click", function() {
    $("#parent").append("<br><div class='block'>" + $(target).html() + "</div>") //append block div
    $("#parent .block:last").find(".datepicker").datepicker({
      dateFormat: "dd-mm-yy"
    }); //then intialize your datepicker
  })
});

.block {
  border: 2px solid black
}

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<div class="box-body" id="collapse1">

  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label>
          <red>*</red>
          Full Name (As on NRIC/FIN)
        </label>
        <input type="text" class="form-control">
      </div>

      <div class="form-group">
        <label>
          <red>*</red>
          Gender
        </label>
        <div class="radio row">
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" class="male"> Male
            </label>
          </div>
          <div class="col-sm-6">
            <label class="radio-inline">
              <input type="radio" class="female"> Female
            </label>
          </div>
        </div>
      </div>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          Date Of Birth (DD-MM-YYYY)
        </label>
        <input type="text" name="date" class="datepicker">
      </form-group>
    </div>

    <div class="col-md-3">
      <form-group>
        <label>
          <red>*</red>
          NRIC / FIN
        </label>
        <input type="text" class="form-control">
      </form-group>
    </div>
  </div>
</div>



<div id="parent" class="col-md-3">
  <div id="child" class="col-md-3">
  </div>
</div>
<br />
<div>
  <button type="button" class="press">
    press
  </button>
</div>

JQuery 用于动态创建日期输入的日期选择器函数

JQuery datepicker function for dynamic created date inputs

jquery

jquery-ui-datepicker