Добавленное значение Javascript удаляется, когда выбран параметр datepicker

У меня есть мода Bootstrap, где вы можете выбрать дату. В фоновом режиме скрытые поля заполняются, которые также отправляются с формой.

Проблема заключается в том, что при выборе элемента datepicker он удаляет скрытое значение по какой-то странной причине (но только скрытые значения, заполненные Javascript).

Datepicker JS:

var date = new Date();
date.setDate(date.getDate());

$('#datepicker').datepicker({
    format: "dd/mm/yyyy",
    startDate: date,
    autoclose: true,
});

Скрытое поле Заполнение JS:

$(function () {
    $('#appointment').on("show.bs.modal", function (e) {
        $("#request_id").val($(e.relatedTarget).data('request-id'));
    });
});

Скрытый HTML-элемент:

<input type="hidden" name="request_id" id="request_id" value="">

Когда сначала появляется окно Modal, я вижу, что поле скрытого значения заполнено, но когда я нажимаю datepicker, он удаляется. Почему это?

Ответ 1

Проблема заключается в том, что show.bs.modal запускается при открытии bootprap datepicker. Поэтому вам просто нужно установить #request_id значение только, когда show.bs.modal связано с модальным открытием. Один из способов, которыми вы можете использовать для получения элемента, который запускал событие, - это проверка значения e.target.id внутри вашего обработчика.

Здесь рабочий пример:

$('#datepicker').datepicker({
  format: "dd/mm/yyyy",
  startDate: new Date(),
  autoclose: true,
});

$(function () {
  $('#appointment').on("show.bs.modal", function (e) {
    if( e.target.id == 'appointment'){
      $("#request_id").val($(e.relatedTarget).data('request-id'));
    }
  });
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>


<input type="hidden" name="request_id" id="request_id" value="">

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#appointment" data-request-id="myExampleId">
  Open appointment modal
</button>

<div id="appointment" class='modal fade'>
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button>
        <h4 class="modal-title">Title</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label for="datepicker">Date bootstrap</label>
          <input type="text" id="datepicker">
        </div>
      </div>
    </div>
  </div>
</div>

Ответ 2

Использовать доверенный Bootstrap-datepicker. Если вы используете то же самое и делаете вызов $ajax, запретите дополнительные значения при создании $ajax(), указав свои значения формы.