logo标签列表

Bootstrap日期时间选择器显示

javascriptjqueryhtmltwitter-bootstrapdatetimepicker
3

我正在尝试实现一个 Bootstrap 日期时间选择器。目前它能够正常工作，但是当我尝试浏览月份时，月份名称会重叠在一起，像这样：

http://i.imgur.com/yps0GlD.png

这是我正在使用的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.min.js">
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/lang/en-gb.js"></script>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-3">
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
            <input type='text' class="form-control" placeholder="Date & Time" />
          </div>
        </div>
        <script type="text/javascript">
          $(function () { $('#datetimepicker1').datetimepicker();});
        </script>
      </div><!-- /.col-lg-3 -->
    </div><!-- /.row -->      
  </div>

</body>
</html>

值得注意的是，除了倒数第二个脚本有一个版本3.1.3可用外，所有样式表和脚本都是最新版本。但是由于某种原因，当我使用此版本时，日期选择器根本无法工作。
另外，我该如何做到用户在单击文本字段（以及字形图标）时出现日期选择器？现在只有用户点击字形图标才有效，而不是文本字段。
你为什么要调用两次bootstrap-datepicker.min.js？尝试移除额外的datetimepicker.min.js调用。还要检查这个fiddle http://jsfiddle.net/Lwkanjpx/ - Sushil
我删除了多余的调用。它仍然存在问题。那个小提琴有完全相同的问题！也许是我的浏览器设置有问题？ - Infamous911
尝试在另一个浏览器中检查您的代码。除非您正在调用其他代码或CSS，否则这应该可以解决问题。 - Sushil
2个回答
4

当用户与输入字段交互时显示日期时间选择器，设置其 allowInputToggle 属性为 true ，这在首次初始化日期时间选择器时完成：

$('#datetimepicker1').datetimepicker({
    allowInputToggle: true
});
1

好的，所以有几个问题。混合使用日期选择器和时间选择器可能是主要问题。您应该像这样设置本地化

$(function () { 
    $('#datetimepicker1').datetimepicker({
        locale:'en'
    });
});

这个 fiddle 运行良好http://jsfiddle.net/yr6a5xr8/，请查看外部资源。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接