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

Question

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

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

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

<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>      

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

标签： javascripthtmltwitter-bootstrapbootstrap-5

Answer 1

演示页面

堆栈溢出源

您应该将 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>