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

Posted 2023-02-24

【中文标题】日期选择器不工作/显示 - Bootstrap 5

【英文标题】：Datepicker not working / showing - 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();，但没有任何改变。

【参考方案1】：

Demo page

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