Почему мое средство выбора даты исправлено в модале начальной загрузки. Я застрял, пытаясь добавить несколько решений jquery, но у меня не получилось

Question

  $('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal").modal("show");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<style>
    .datepicker {
      z-index: 1600 !important; /* has to be larger than 1050 */
    }
    .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      width: 133px !important;
    }
</style>

<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon" style="width:100%;"><i class="glyphicon glyphicon-th"></i></span></div></div></form>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $('#myModal').on('shown.bs.modal', function() {
  $('.input-group.date').datepicker({
    format: "dd/mm/yyyy",
    startDate: "01-01-2015",
    endDate: "01-01-2020",
    todayBtn: "linked",
    autoclose: true,
    todayHighlight: true,
    container: '#myModal modal-body'
  });
});

$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal").modal("show");
});

</script>

Когда я прокручиваю вниз, указатель даты остается фиксированным, помогите.

Answer 1

$( function() {
  $( "#datepicker" ).datepicker();
});
$("[id=add]").click(function() {
  $("#myModal .modal-header h4").html("Request for Change");
  $("#myModal").modal("show");
});
$(".date-picker").datepicker({
  orientation: "top",
  beforeShow: function(input, obj) {
$(input).after($(input).datepicker('widget'));
  }
});
$(".date-picker").focus(function (){
  $("#ui-datepicker-div").position({
    my: "center top",
    at: "center bottom",
    of: $(this)
  });
});

.datepicker-container{
  position: relative !important;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="well">
  <button type="button" id="add">Add</button>
</div>
<div id="myModal" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4></h4>
      </div>
      <div class="modal-body">
        <label class="label">Date picker</label>
        <div class="datepicker-container">
          <input class="form-control datePicker date-picker" id="datepicker" placeholder: "MM/YYYY">
        </div>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
        <h1>helllo</h1>
      </div>
    </div>
  </div>
</div>

Выше приведен рабочий пример решения вашей проблемы.