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

Question

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

这是代码：

<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 显示了我所有脚本的确切问题。

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

Answer 1

例如：

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

Answer 2

链接的 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/。这是更新后的代码 fiddle:

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
  });
});

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

Is there any conflict script with Bootstrap 4 Datepicker?

javascript

jquery

datepicker

bootstrap-4