bootstrap datetimepicker不工作,不显示javascript错误

时间:2016-03-05 05:19:26

标签: jquery twitter-bootstrap bootstrap-datetimepicker

我按照建议使用NuGet安装了Bootstrap Datetimepicker here下面是无法显示datetimepicker控件的html代码。从chrome开发人员工具中我发现加载脚本没有问题,或者控制台中存在任何脚本错误。任何猜测为什么下面的代码无法显示bootstrap datetimepicker

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
         <script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
  <script type="text/javascript" src="/scripts/moment.min.js"></script>
  <script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
  <link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
  <!-- include your less or built css files  -->
  <!-- 
  bootstrap-datetimepicker-build.less will pull in "../bootstrap/variables.less" and "bootstrap-datetimepicker.less";
  or-->

</head>
<body>
    <form>
    <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>
        </form>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

您的代码有效。你错过的是bootstrap CSS。您应该单击以显示输入旁边的日历图标。但日历也没有风格。

试着把它放在头上:

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">