Javascript 是否存在与Bootstrap 4 Datepicker冲突的脚本?

Javascript 是否存在与Bootstrap 4 Datepicker冲突的脚本?,javascript,jquery,bootstrap-4,datepicker,Javascript,Jquery,Bootstrap 4,Datepicker,我想做一个简单的引导数据采集器一个相当大的页面,但我不能让它的工作,尽管所有的脚本和样式表 代码如下: <html> <body> <div id="datepicker" class="input-group date" data-date-format="dd-mm-yyyy"> <input class="form-control" type=&

我想做一个简单的引导数据采集器一个相当大的页面,但我不能让它的工作,尽管所有的脚本和样式表

代码如下:

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

$(函数(){
“严格使用”
$(文档).ready(函数(){
$(函数(){
$(“#日期选择器”)。日期选择器({
自动关闭:是的,
今天的亮点:真的
});
});
});
})
我的意思是,我没有模式,但在输入部分旁边有一个丑陋的buggy日历。 这里有两张图片显示了我所拥有的和我正在寻找的(基本的BS Datepicker示例)

坏结果

正常结果

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

下面是一个例子,显示了我所有脚本的确切问题

也许我没有考虑正确的事情,但我已经考虑了很长时间的脚本加载,但无法找出问题所在…

例如:

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

$(函数(){
$('input[name=“birth”]”)。daterangepicker({
singleDatePicker:是的,
决战:没错,
年份:1901年,
maxYear:parseInt(矩().format('YYYY'),10)
},函数(开始、结束、标签){
var years=moment().diff(开始“年”);
警惕(“你是“+岁+”岁!”);
});
});

要查找更多示例和cssjs文件,请查看链接的JSFIDLE存在多个问题,如果它与您的本地设置匹配,则可能是问题所在

基本上:

  • 您已经链接了jQueryUI库,该库已知与Bootstrap有冲突,尤其是Bootstrap3和更低版本
  • 您的一些脚本出现问题-必须在bootstrap.js之前加载popper.js
  • Bootstrap4改变了输入组的分类方式以及应该使用哪些元素。可能要查看更新的文档:
  • 您有三个不同的ondomready事件处理程序-只需要一个
  • 您需要使用bootstrap-datepicker3.css或bootstrap-datepicker3.min.css文件,“未编号”版本适用于bootstrap 2,这肯定不起作用
  • 这是有效的:。以下是更新后的fiddle中的代码:

    HTML

    
    
    JavaScript

    $(函数(){
    $(“#日期选择器”)。日期选择器({
    自动关闭:是的,
    今天的亮点:真的
    });
    });
    
    不过,日历是有效的。那有什么问题?这很难看?你也添加了任何可能需要的CSS吗?我想是的,我没有遇到纯BS4的任何问题,你只需要理论上的脚本和CSS“引导日期选择器”为了让datepicker正常工作,我不认为你的datepicker与bootstrap V4兼容,可能需要更具体一些——有相当多的bootstrap datepicker插件,并不是所有插件都与bootstrap 4兼容。小提琴中的版本是尚未更新的版本之一。虽然此链接可以回答问题,但最好在此处包含答案的基本部分,并提供链接以供参考。如果链接页面发生更改,仅链接的答案可能无效。-非常感谢,你的回答都很有用。我的主要问题是datepicker3而不是datepicker和jQueryUI问题