如何在bootstrap-datepicker中添加自定义按钮以设置日期并关闭日历

我明白你遇到的问题了——直接调用$('.datepicker-days').append()没生效，核心原因是bootstrap-datepicker的日期面板（.datepicker-days）是在用户点击输入框触发选择器时才动态创建的，你在初始化后立刻执行append，此时这个DOM元素还不存在，所以根本找不到目标。

下面是修正后的完整代码，我标注了关键的修改点：

<!DOCTYPE html>
<html>
<head>
    <title>JS</title>
    <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 rel="stylesheet" type="text/css" href="css/bootstrap-datepicker.css">
    <style>
        /* 可选：给自定义按钮加个适配datepicker的样式 */
        .custom-date-btn {
            width: 100%;
            padding: 8px;
            border: none;
            background-color: #f8f9fa;
            cursor: pointer;
        }
        .custom-date-btn:hover {
            background-color: #e9ecef;
        }
    </style>
</head>
<body>
    <div class="container">
        <hr>
        <div class="input-group date">
            <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
        </div>
    </div>
    <!-- 移除了重复引入的jQuery slim版，避免冲突 -->
    <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="locales/bootstrap-datepicker.ja.min.js"></script>
    <script type="text/javascript">
        $('.input-group.date').datepicker({
            format: "yyyy/mm/dd",
            language: "ja",
            daysOfWeekDisabled: "0,6",
            daysOfWeekHighlighted: "0,6",
            datesDisabled: ['2019/08/06', '2019/08/21']
        })
        // 关键：监听datepicker的show事件，此时面板已经生成
        .on('show', function() {
            // 先检查按钮是否已存在，避免每次打开面板重复添加
            if (!$('.datepicker-days .custom-date-btn').length) {
                // 把按钮添加到面板的tfoot区域，布局更合理
                $('.datepicker-days tfoot').append('<tr><th colspan="7"><button class="custom-date-btn">设置今天</button></th></tr>');
            }
            // 给自定义按钮绑定点击逻辑
            $('.custom-date-btn').on('click', function() {
                // 示例功能：设置为当前日期
                $('.input-group.date').datepicker('setDate', new Date());
                // 点击后关闭日期面板
                $('.input-group.date').datepicker('hide');
            });
        });
    </script>
</body>
</html>

核心修改说明： #

• 使用show事件触发DOM操作：这个事件会在日期面板完全显示后触发，此时.datepicker-days已经存在，能准确找到目标元素。
• 添加重复检查：避免每次打开面板都重复插入按钮元素。
• 绑定按钮功能：示例中实现了“设置今天日期并关闭面板”的逻辑，你可以根据需求修改成自己需要的功能。
• 移除重复的jQuery引入：原代码中同时引入了jQuery slim版和完整版，容易引发冲突，建议只保留完整版。
• 样式适配：给按钮加了基础样式，让它和datepicker的UI风格更统一。

内容的提问来源于stack exchange，提问作者Saibal Kabir