Блог

У меня есть форма в начальной загрузке. Эта форма всплывает на кнопке. В форме у меня есть поле ввода, в котором я хочу сделать jQuery datepicker. Он никогда не отображается при нажатии на поле ввода

В моей голове я включил эти файлы:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.min.css"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.css">
<script src="config.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4 CW1fNKwOg=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
 

Мой модальный код таков

 <!-- Modal: modalAddContract -->
<!-- Datepicker - MS-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
         <script>
 
 $(function() {
  $(document).on("click", ".modal-body", function () {
   $("[data-toggle='datepicker']").datepicker({
     dateFormat: 'yy-mm-dd',
     parentEl: '#dispatch_modal'                           
     });
      }); 
});

           </script>
<form id="addContractForm">
<div class="modal fade" id="modalAddContract" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
    <div id="new-contract-app" class="modal-content">

      <div class="modal-header">
        <h4 class="modal-title text-center w-100 font-weight-bold lang" key="langAddContract"></h4>
      </div>

      <div class="modal-body">

        <div class="form-group">
          <label class="lang" key="langDevice" for="addContractFormDeviceID"></label>

          <select class="form-control" id="addContractFormDeviceID">
            <option v-for="device in vueDevices.items" :value="device.id">
              {{ device.device_type }} - {{ device.device_description }} ({{ device.id }})
            </option>
          </select>

        </div>


        <div class="form-group">
          <label class="lang" key="langContractDescription" for="addContractContractDescription"></label>
          <input type="text" class="form-control" id="addContractContractDescription">
        </div>

        <b><div class="lang" key="langAddContractInstrTop"></div></b><br>

        <div class="row align-items-end">  
          <div class="form-group col">
            <label class="lang" key="langDateFrom" for="addContractFormDateFrom"></label>
            <input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateFrom" placeholder="YYYY-MM-DD">
          </div>
          <div class="form-group col">
            <label class="lang" key="langDateTo" for="addContractFormDateTo"></label>
            <input data-toggle="datepicker" type="text" class="form-control" id="addContractFormDateTo" placeholder="YYYY-MM-DD">
          </div>
        </div>
        <hr>
        
       

        <b><div class="lang" key="langAddContractInstrMid"></div></b><br>

        <div class="row align-items-end">
          <div class="form-group col-6">
            <label class="lang" key="langDeviceUser" for="addContractFormDeviceUser"></label>
            <input type="text" class="form-control" id="addContractFormDeviceUser" v-model="inputUser">
          </div>
          <div class="form-group col-3" style="padding-right: 0px">
            <label class="lang" key="langUserPart" for="addContractFormUserPart"></label>
            <input type="text" class="form-control" id="addContractFormUserPart" v-model="inputPart" onkeyup="$('#addContractFormUserPart').val($('#addContractFormUserPart').val().replace(',','.'))">
          </div>
          <div class="form-group col-3">
            <b-button block variant="outline-success" class="float-right lang" key="langAddUser" @click="addUser"></b-button>
          </div>
        </div>

        <ul>
          <li>{{ owner }}, delež: {{ computedPart }}</li>
          <li v-for="user in users">{{ user.email }}, delež: {{ user.usage_part }} <span v-on:click="removeUser(user)" style="color:red"><span class="lang" key="langRemove"></span> <i class="fas fa-times"></i></span></i></li>
        </ul>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary lang" key="langCancel" data-dismiss="modal" @click="resetAddContractForm"></button>
        <button id="addContractButton" type="button modal-dialog-centered" class="btn btn-primary lang" key="langAddContract" @click="addContract"></button>
      </div>

    </div>
  </div>
</div>
 

А также в конце моего кода у меня есть эти сценарии

 <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4 CW1fNKwOg=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN 8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script
<script src="lib/mobile-nav/mobile-nav.js"></script>
<script src="lib/p2r/jquery.p2r.min.js"></script>
 

Забавно, что если я создам новый файл .html и включу только теги, которые находятся в одном и только одном поле ввода, мой код будет работать нормально.. ПОЭТОМУ я предполагаю, что есть проблема с модальным или всплывающим окном.. Я не знаю, как это исправить.. Спасибо