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

Question

我正在尝试使用 bootstrap 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>      

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

Answer 1

为什么要为日期选择器字段添加额外的 JS？

您只需将输入字段设置为 typedate即可获取本机浏览器日期选择器。

例子：

<input type="date" class="form-control" name="date-field" />

date对（以及）字段的支持可以在Can I Usetime上找到。

Answer 2

演示页面

堆栈溢出源

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