日期选择器不工作/显示 - Bootstrap 5答案

【问题标题】：Datepicker not working / showing - Bootstrap 5日期选择器不工作/显示 - Bootstrap 5
【发布时间】：2021-12-14 05:55:28
【问题描述】：

我正在尝试使用引导程序 5 在我的页面中添加一个时间选择器，但由于某种原因日历没有加载，所以我无法选择任何日期。不知道是我做错了什么还是插件与最新版本的bootstrap不兼容。

如果您单击“启动演示模式”，您将看到日期输入字段并且日期选择器在那里不起作用。

这是输入日期字段的代码：

<div class="col-12">
    <label for="date" class="col-sm-1 col-form-label">Date</label>
    <div class="input-group date" id="datepicker">
        <input type="text" class="form-control">
        <span class="input-group-append">
        <span class="input-group-text bg-white d-block">
        <i class="fa fa-calendar"></i>
        </span>
        </span>
    </div>
</div>

JS（截断）：

<script type="text/javascript">
    $(document).ready(function () {
        $('#datepicker').datepicker();
        ...
    });
</script>

我也尝试根据bootstrap-datepicker docs 使用$('.datepicker').datepicker();，但没有任何改变。

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-5

【解决方案1】：

Demo page

Stackoverflow source

你应该把 bootstrap-datepicker.min.js 放在 jquery.js 之后。因此它会以某种方式出错。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

【讨论】：