Why multiple datepicker not working?

by

You can use a common class for the date field and just initialize the datepicker for the newly cloned element.

$('body').on('click', '.btn-add-detail', function() {
  // clone the element 
  $ele = $('#pax .clone').clone();
  // append it to parent and do the rest
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // get the date input and initialize the datepicker
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});


$('body').on('click', '.btn-add-detail', function() {
  $ele = $('#pax .clone').clone();
  $ele.appendTo('#pax').removeClass('hidden clone').find(".not_included").removeClass("not_included");
  // or just initialize for the appended
  $(".pax_dob", $ele).datepicker({
    dateFormat: "yy-mm-dd",
    format: "yyyy-mm-dd",
    orientation: "left",
    autoclose: true,
    changeYear: true,
    changeMonth: true,
    yearRange: "-100:+0"
  });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>

Or the same with chaining methods.

$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});


$('body').on('click', '.btn-add-detail', function() {
  $('#pax .clone')
    .clone()
    .appendTo('#pax')
    .removeClass('hidden clone')
    .find(".not_included")
    .removeClass("not_included")
    .end()
    .find(".pax_dob").datepicker({
      dateFormat: "yy-mm-dd",
      format: "yyyy-mm-dd",
      orientation: "left",
      autoclose: true,
      changeYear: true,
      changeMonth: true,
      yearRange: "-100:+0"
    });
});

$("#pax_dob_1").datepicker({
  dateFormat: "yy-mm-dd",
  format: "yyyy-mm-dd",
  orientation: "left",
  autoclose: true,
  changeYear: true,
  changeMonth: true,
  yearRange: "-100:+0"
});

$('body').on('click', '.btn-remove-detail', function() {
  if ($('#pax div.row').length > 2) {
    $(this).parent().parent().parent().parent().parent().parent().remove();
  }
});
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div class="form-group">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-10">
        <label class="control-label"><strong>Pax</strong>
        </label>
      </div>
      <div class="col-sm-2">
        <label class="control-label">Add Pax</label>
        <button type="button" class="btn btn-success btn-add-detail"><i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-12">
    <div id="pax">
      <div class="row margin-top-10 clone hidden">
        <div class="table-responsive">
          <table class="table">
            <tbody>
              <tr>
                <td style="width:160px;">
                  <select class="form-control pax_type not_included required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title not_included required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name not_included">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name not_included">
                </td>
                <td>
                  <input type="text" name="pax_dob[]" class="form-control pax_dob not_included pax_dob">
                </td>
                <td>
                  <button type="button" class="btn red btn-remove-detail"><i class="fa fa-trash-o"></i>delete</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="row">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th>Type Passenger</th>
                <th>Title</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Date of Birth</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>
                  <select class="form-control pax_type required" name="pax_type[]">
                    <option value="">--Select Type Passenger--</option>
                    <option value="SGL">Single</option>
                    <option value="DBL">Double</option>
                    <option value="TWN">Twin</option>
                    <option value="TRPL">Triple</option>
                    <option value="QUAD">Quad</option>
                  </select>
                </td>
                <td>
                  <select class="form-control pax_title required" name="pax_title[]">
                    <option value="">--Select Title--</option>
                    <option value="Mr">Mr.</option>
                    <option value="Mrs">Mrs.</option>
                    <option value="Miss">Miss.</option>
                  </select>
                </td>
                <td>
                  <input type="text" id="pax_first_name" name="pax_first_name[]" class="form-control pax_first_name">
                </td>
                <td>
                  <input type="text" id="pax_last_name" name="pax_last_name[]" class="form-control pax_last_name">
                </td>
                <td>
                  <input type="text" id="pax_dob_1" name="pax_dob[]" class="form-control pax_dob">
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <input type="hidden" class="pax_check" name="pax_check" id="pax_check" />
</div>

More Related Contents:

  1. Specifying the value output of of an HTML5 input type = date?
  2. how do i submit message to my email by html or js?
  3. JS hide function error
  4. Javascript counting all the characters from a HTML document
  5. How to create button to check uncheckable checkbox
  6. How to get numeric value from a prompt box? [duplicate]
  7. JSFiddle code not working in my own page
  8. How to set value of input text using jQuery
  9. How to display JavaScript variables in a HTML page without document.write
  10. How to make a link open multiple pages when clicked
  11. How to dynamically create ‘@-Keyframe’ CSS animations?
  12. Infinity Loop Slider Concepts
  13. Check Ctrl / Shift / Alt keys on ‘click’ event
  14. Why does Jquery only affect the first div element? [duplicate]
  15. Set date in input type date
  16. Text blinking jQuery
  17. jQuery vs document.querySelectorAll
  18. How to mute an html5 video player using jQuery
  19. HTML5 callbacks?
  20. How to save the contents of a div as a image?
  21. why is jQuery click event firing multiple times
  22. How to get the JSON with duplicate keys completely in javascript
  23. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  24. Open new window without focus on it [duplicate]
  25. window.getSelection return html [duplicate]
  26. refresh div with jquery
  27. focus on next tabindex of HTML element onEnter keypress by JQuery
  28. Jquery change text between two elements
  29. Remove everything within script and style tags
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment