Bootstrap 4 Datepicker 是否有任何冲突脚本？答案

【问题标题】：Is there any conflict script with Bootstrap 4 Datepicker?Bootstrap 4 Datepicker 是否有任何冲突脚本？
【发布时间】：2021-01-15 11:38:05
【问题描述】：

我想在一个相当大的页面上做一个简单的引导日期选择器，但尽管有所有脚本和样式表，但我无法让它工作。

代码如下：

<html>
  <body>
    <div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
      <input class="form-control" type="text">
      <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
    </div>
  </body>
</html>
<script>
$(function() {
  'use strict'
  $(document).ready(function() {
    $(function () {
      $("#datepicker").datepicker({
        autoclose: true,
        todayHighlight: true
      });
    });
  });
})
</script>

我的意思是我没有模式，但输入部分旁边有一个丑陋的错误日历。这是 2 张图片，显示了我所拥有的和正在寻找的（基本的 BS Datepicker 示例）

不好的结果

正常结果

控制台没有错误，在网上的任何地方都找不到相同的问题。

这是一个jsfiddle，显示了我在所有脚本中遇到的确切问题。

也许我看的不是正确的东西，但我一直在寻找脚本加载的时间，但无法弄清楚问题出在哪里......

【问题讨论】：

不过，日历有效。所以有什么问题？丑吗？
您是否也添加了任何可能需要的 CSS？
我想是的，我没有遇到纯 BS4 的任何问题，理论上你只需要脚本和 css "bootstrap-datepicker" 来让 datepicker 工作。
我认为您的日期选择器与 bootstrap v4 不兼容
可能需要更具体一些 - 有很多 Bootstrap Datepicker 插件，并非所有这些都与 Bootstrap 4 兼容。您小提琴中的版本是尚未更新的版本之一。

标签： javascript jquery bootstrap-4 datepicker

【解决方案1】：

链接的 jsFiddle 存在多个问题，如果它与您的本地设置匹配，则可能是问题所在。

基本上：

您已链接 jQuery UI 库 - 该库已知与 Bootstrap 冲突，尤其是 Bootstrap 3 及更低版本。
您的某些脚本出现故障 - popper.js 必须在 bootstrap.js 之前加载
Bootstrap 4 更改了输入组的分类方式以及应使用的元素。可能想查看更新的文档：https://getbootstrap.com/docs/4.5/components/input-group/
您有三个不同的 ondomready 事件处理程序 - 只需要一个。
您需要使用 bootstrap-datepicker3.css 或 bootstrap-datepicker3.min.css 文件 - “未编号”版本适用于 Bootstrap 2，它肯定赢了不行。

这有效：https://jsfiddle.net/z1x7f8p4/。这是更新小提琴的代码：

HTML

<div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy">
  <input class="form-control" type="text" />
  <div class="input-group-append">
    <span class="input-group-text"><i class="fa fa-calendar"></i></span>
  </div>
</div>

JavaScript

$(function() {
  $("#datepicker").datepicker({
    autoclose: true,
    todayHighlight: true
  });
});

【讨论】：

非常感谢，您的所有回答都很有用。我的主要问题是 datepicker3 而不是 datepicker 和 jQueryUI 问题

【解决方案2】：

例如：

<input type="text" name="birthday">
<script>
$(function() {
  $('input[name="birthday"]').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 1901,
    maxYear: parseInt(moment().format('YYYY'),10)
  }, function(start, end, label) {
    var years = moment().diff(start, 'years');
    alert("You are " + years + " years old!");
  });
});
</script>

要查找更多示例以及 css 和 js 文件，请查看 https://www.daterangepicker.com/

【讨论】：