JQuery datepicker function for dynamic created date inputs

Question

I'm trying to use jquery's datepicker for dynamic form fields. This is my fiddle that show the issue.

below is my code

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

Steps to reproduce:

click "press" button
A new div with a second date input appears

Expected result: able to pick date for x amount of date input field created

Actual result: date pick on the second input field update the first field

What I have tried: I apply solution from this page, it does not work for me

I want to do this for any amount of inputs dynamically created by the user. Thanks for the help!

The linked SO answer is not for dynamically generated elements. Init your datepickers after you add them. — fdomn-m
– fdomn-m, Commented May 5, 2021 at 9:02
how do i init my datepickers ? since i am creating them on the go — yongchang
– yongchang, Commented May 5, 2021 at 9:04
This should work as the last line of your addInputLine() $(parent).find(".datepicker" ).datepicker({ dateFormat: "yyyy-mm-dd" });, but the datepicker isn't working in your fiddle - but strangely does work if you remove the first init: jsfiddle.net/xpmgLc83 I think it's because of the way you copy the html - it's copying the hasDatepicker class so doesn't re-init as it thinks it's already a datepicker. — fdomn-m
– fdomn-m, Commented May 5, 2021 at 9:08
so weird, your soultion work for x amount of input but does not work for the first one hmm — yongchang
– yongchang, Commented May 5, 2021 at 9:13

Swati · Accepted Answer · 2021-05-06 05:35:24Z

You can use clone() for cloning your collapse1 div . Then , whenever user click on press button simply use .append() to append new divs inside your parent div and then intialize your datepicker using $("#parent .block:last").find(".datepicker").datepicker({//options})

Demo Code :

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

Collectives™ on Stack Overflow

JQuery datepicker function for dynamic created date inputs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related