带有 bootstrap 5 的日期时间选择器无法正常工作答案

【问题标题】：datetimepicker with bootstrap 5 not working properly带有 bootstrap 5 的日期时间选择器无法正常工作
【发布时间】：2023-01-14 22:31:40
【问题描述】：

我对 JS 很陌生，正在尝试将 datetimepicker 添加到我的网络演示中。本教程适用于 bootstrap 3.3.7，但当我将其更改为版本 5 时，日历不再显示。

最小的工作 html 如下

<!-- this works OK -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- this does not! -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/css/bootstrap-datetimepicker.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='datetimepicker1'>
  <input type='text' class="form-control"/>
  <span class="input-group-addon\">  
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

<script>
  $(".date").datetimepicker({locale: "ru"});
</script>

我在项目中使用bootstrap@5.1.3，不想因为一个datetimepicker而改变它。我已经尝试过很多变体，但都没有用。我怎样才能让它工作？

正如https://stackoverflow.com/a/68683409/8900030 所述，https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js 适用于 Bootstrap 3，而不是 Bootstrap 5。

我应该改用什么版本？（我怎么知道的？）

另请注意，我需要 {locale: "ru"} 参数，该参数在 bootstrap 3 AFAIK 中不可用。

【问题讨论】：

标签： javascript bootstrap-5 bootstrap-datetimepicker

【解决方案1】：

接班人在这里：https://getdatepicker.com/

它不再需要 Bootstrap、jQuery 或 Moment。在此处查看安装文档https://getdatepicker.com/6/installing.html。

【讨论】：

谢谢！那解决了我的问题。（尽管 TempusDominus 文档编写得不够好，无法开箱即用）。

【解决方案2】：

您可以使用纯 html 来获取日期和时间选择这对我来说似乎很有效

<input type="datetime-local">

【讨论】：

【解决方案3】：

是的，在输入字段中添加“datetime-local”似乎有效。我也为我施展魔法。

<input type="datetime-local">

【讨论】：