发表新帖
发表新帖

Why multiple datepicker not working?

前端 未结
关注
2 590
眼角桃花
眼角桃花 2020-12-02 03:00

My Javascript code is like this :

var j = 1;
$(\'body\').on(\'click\', \'.btn-add-detail\', function(){
    $(\'#pax_dob_2\').attr(\'id\',\'pax_dob_\' + j);
相关标签:
2条回答
  • 耶瑟儿～
    2020-12-02 03:04

    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>

    0 讨论(0)
  • 耶瑟儿～
    2020-12-02 03:24

    When you clone something - you also clone its id - therefore when you append it into another element - you are also appending a duplicated id. You need to ensure that the id of the cloned element is altered before appending it.

    perhaps as you are appending it - you could alter its id with

    //js 
var new ID = uniqueContent;
 .attr('id', newID);
    0 讨论(0)
 看不清?
提交回复
热议问题