jquery datePicker在bootsrap弹出窗口中不起作用

jQuery DatePicker 在 Bootstrap 弹出窗口中不起作用的解决方案

问题原因分析

当 jQuery DatePicker 在 Bootstrap 弹出窗口（如模态框）中不起作用时，通常是由以下几个原因导致的：

z-index 冲突：Bootstrap 模态框的 z-index 值较高，可能覆盖了 DatePicker 的弹出层
DOM 结构限制：DatePicker 可能被限制在模态框的 DOM 结构中
事件冒泡阻止：模态框的事件处理可能阻止了 DatePicker 的事件触发
初始化时机问题：DatePicker 可能在模态框完全显示前就已初始化

解决方案

1. 调整 z-index

确保 DatePicker 的 z-index 高于模态框：

.ui-datepicker {
    z-index: 99999 !important;
}

2. 正确初始化 DatePicker

确保在模态框完全显示后再初始化 DatePicker：

$('#myModal').on('shown.bs.modal', function() {
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true
    });
});

3. 将 DatePicker 附加到 body

避免 DatePicker 被限制在模态框内：

$('.datepicker').datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
    appendTo: 'body'  // 关键选项
});

4. 完整示例代码

<!DOCTYPE html>
<html>
<head>
    <title>DatePicker in Bootstrap Modal</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <style>
        .ui-datepicker {
            z-index: 99999 !important;
        }
    </style>
</head>
<body>

<!-- 按钮触发模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">选择日期</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <input type="text" class="form-control datepicker" placeholder="选择日期">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.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() {
    $('#myModal').on('shown.bs.modal', function() {
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayHighlight: true,
            appendTo: 'body'
        });
    });
});
</script>
</body>
</html>