日期选择器在模态 jquery 中不起作用-解网

问：

我正在使用这个日期字段;在简单的 HTML 页面上，它正在工作

if ($('.datepicker').length) {
  $(".datepicker").datepicker({
    minDate: 0
  });
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<input class="datepicker" type="text" name="pickup_date" id="pickup_date" value="" placeholder="Select Date">

但是在模态上它不起作用

我试过了

$('#myModal').on('shown.bs.modal', function (e) {
  $('.date').datepicker();
});

$(document).on('click', "#openbtn", function( ){
  
  $('#exampleModal').modal('show');

  setTimeout(function () {
      
    if($('.datepicker').length){
      $( '.datepicker' ).datepicker();
    }
  }, 500);

但它不起作用

JavaScript HTML jQuery 日期选择器

但是在模态上它不起作用 - 哪个模态？您的评论建议使用 bootstrap 模式，但为什么不使用 jquery-ui 模式呢？或者其他 1000 个基于 div 的模态（以前是一种选择）。Bootstrap 和 jquery-ui 不能很好地混合使用，因为它们具有冲突的 css 类名。你能更新你的snipper，包括你正在使用的bootstrap版本，以及你如何创建带有日期选择器的“模式”（例如，通过ajax加载HTML的模式内容？）如果使用ajax，请提供一个提供html的模拟。<dialog>

答：

0赞 Sahab 10/22/2023 #1

希望这能有所帮助

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<script>

    
    $(document).ready(function() {
    
    if ($('.datepicker').length) {
      $(".datepicker").datepicker({
        minDate: 0
      });
    }
    
    $('#exampleModal').modal('show');
    
});

</script>




<!-- Trigger button to open the modal -->
<button type="button" data-toggle="modal" data-target="#exampleModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal" id="exampleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      This is the modal content.
    
     <input class="datepicker" type="text" name="pickup_date" id="pickup_date" value="" placeholder="Select Date">
    </div>
  </div>
</div>






    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

上一个：调用 Bootstrap Material 日期选择器时，仅显示一个空格弹出窗口

下一个：jQuery datepicker 不会重置禁用的天数

日期选择器在模态 jquery 中不起作用

Date picker not working inside modal jquery

评论