bootstrap twitter datepicker + modal - 日历出现在父屏幕而不是模态屏幕中

ajax 屏幕

1个回答

写回答

AKJ123_

2025-07-10 00:41

+ 关注

屏幕

标题：使用Bootstrap Datepicker在模态框中实现日期选择器

在Web开发中，使用Bootstrap框架是一种常见的选择，它提供了许多有用的组件来简化界面设计。其中，日期选择器是一个常见的需求，而结合模态框使用时，有时可能会遇到日期选择器出现在父屏幕而不是模态屏幕中的问题。在这篇文章中，我们将介绍如何使用Bootstrap Datepicker解决这个问题，并提供一个简单的案例代码。

问题背景

在使用Bootstrap框架的模态框（Modal）时，有时会遇到一个常见的问题，即在模态框中使用日期选择器（Datepicker）时，日期选择器弹出的日历并不会出现在模态框内，而是显示在整个父屏幕上。这可能导致用户体验不佳，特别是在模态框较小的情况下。

解决方案

为了解决这个问题，我们可以采用一种简单而有效的方法。通过使用Bootstrap Datepicker的contAIner选项，我们可以将日期选择器的父容器设置为模态框的元素。这样，日期选择器将会在模态框内正确显示，而不会跑到父屏幕上。

下面是一个简单的案例代码，演示了如何在模态框中使用Bootstrap Datepicker，并解决日期选择器出现在父屏幕的问题。

html
<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/CSS/bootstrap.min.CSS">
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/CSS/bootstrap-datepicker.min.CSS">
  <title>Bootstrap Datepicker in Modal</title>
</head>
<body>
<div class="contAIner mt-5">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Open Modal with Datepicker
  </button>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Datepicker in Modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="datepicker">Select Date:</label>
              <input type="text" class="form-control" id="datepicker">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.JS"></script>
<script src="https://cdn.JSdelivr.net/npm/@popperJS/core@2.10.2/dist/umd/popper.min.JS"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/JS/bootstrap.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/bootstrap-datepicker/1.9.0/JS/bootstrap-datepicker.min.JS"></script>
<script>
  $(document).ready(function(){
    // Initialize datepicker with contAIner option
    $('#datepicker').datepicker({
      contAIner: '#exampleModal'
    });
  });
</script>
</body>
</html>

在这个案例中，我们在模态框中嵌套了一个简单的日期选择器。关键是在使用Datepicker时，通过设置contAIner选项，我们告诉Datepicker将其父容器设为模态框，确保日历出现在模态框内。这样，用户就能够在模态框中方便地选择日期，而不会受到日历出现在父屏幕的困扰。

举报有用（4）分享收藏

bootstrap twitter datepicker + modal - 日历出现在父屏幕而不是模态屏幕中

1个回答

AKJ123_

热门话题

相关问题