Fatal编程技术网
  • javascript/
  • Javascript 引导日期时间选择器无法工作

Javascript 引导日期时间选择器无法工作

javascript jquery twitter-bootstrap

Javascript 引导日期时间选择器无法工作,javascript,jquery,twitter-bootstrap,bootstrap-datetimepicker,Javascript,Jquery,Twitter Bootstrap,Bootstrap Datetimepicker,我正试着使用 我相信我遵守了所有的指示，但我无法让它工作。Firebug没有给我任何错误，我多次检查了所有文件路径。我做错了什么 实际上，我在这里发现了同样的问题，没有得到回答： 这是我的 这是我的代码： <html> <head> <title>date test</title> <link href="css/bootstrap.min.css" rel="stylesheet"/>

我正试着使用

我相信我遵守了所有的指示，但我无法让它工作。Firebug没有给我任何错误，我多次检查了所有文件路径。我做错了什么

实际上，我在这里发现了同样的问题，没有得到回答：

这是我的

这是我的代码：

<html>
    <head>
        <title>date test</title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="bootstrap-datetimepicker.min.css"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <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>
                    </div>
                </div>
                <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
            </div>
        </div>    
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="moment.js"></script>
            <script type="text/javascript" src="transition.js"></script>
            <script type="text/javascript" src="collapse.js"></script>
            <script type="text/javascript" src="bootstrap.min.js"></script>
            <script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
    </body>
</html>
JS

HTML

注意：*我从JSFIDLE中的外部资源中删除了collapse.js，它引发了一些语法错误，最后您加载了jquery库2.1，我进行了更正，将id='datetimepicker1'分配给了输入框，而不是div*

在小提琴中，您没有引用jQuery库

它在这个更新中工作

检查我的更新

您有两个问题：

1-缺少jQuery库 2-jsfiddle的div结果与daterange选择器按钮重叠，因此我为测试添加了边距：

<div class='input-group date' id='datetimepicker1' style="margin-top: 100px;">
在您的fiddle中，未加载jQuery库。。检查此更新：我猜@SyedQarib是正确的，这不是引导库的问题。。相反，没有加载jQuery库。。检查控制台..@SyedQarib:Yup。。我的坏兄弟。。一句简单的评论就足以纠正我的答案。为什么反对票兄弟？你能告诉我为什么我们在这个平台上有反对票功能吗？如果答案是不相关的或完全无用的。。如果答案是正确的，它可以撤销。非常感谢大家！不幸的是，这里的新小提琴在我的电脑上都不能用！我的电脑设置有问题吗？？当我在原始网站上使用datetimepicker时，它工作得很好。我在我的代码中包含jquery.js-这不是正确的做法吗？@user3504783你检查过我的JSFIDLE了吗？它的工作方式我有，但它对我不起作用：当我点击日历图标时，什么都没有发生，我的光标也没有变成手。或者我还需要做什么吗？@user3504783点击输入框：，图标只是用来设置样式，当你点击输入框时，日期选择器就会显示出来！谢谢真不敢相信我竟然忽略了这一点！有没有办法通过点击日历图标让它工作？我怎样才能在我的计算机上解决jquery问题？我已经用你的建议解决了代码问题？哦，很好，这很有效！你能解释一下重叠是什么意思吗？所以我必须确保我有足够的空间？我如何让它在我的html文件中工作？这肯定仍然是jquery的问题，但我不知道如何解决它。哦，我实际上刚刚解决了它！我的意思是jquery——我仍然不太理解重叠部分，但它是有效的！！重叠意味着某些div出现在主元素的顶部，因为该div具有更高的z索引。。只需确保daterange选取器图标顶部没有出现div。。其次，对于jQuery问题，应该首先引用jQuery，然后再引用所有库，而且您的引用链接也被破坏了，所以请确保库存在……你们太棒了@user3504783:现在您应该接受关闭此线程的答案： 
<div class="container">
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <div class='datetimepicker1 input-group date'>
                            <input  type='text' class="datetimepicker1 form-control" />
                            <span id='' class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>    

<div class='input-group date' id='datetimepicker1' style="margin-top: 100px;">