Bootstrap 日期时间选择器显示

Question

我正在尝试实现 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 可用，但出于某种原因，当我使用它时版本，日期时间选择器根本不起作用。

此外，我怎样才能使当用户单击文本字段（以及字形图标）时出现日期选择器？现在只有当用户点击字形图标而不是文本字段时它才有效。

Answer 1

好的，所以我猜 problems.Mixing 日期选择器很少，而日期时间选择器是主要的。你应该像这样设置语言环境

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

这个fiddle工作正常http://jsfiddle.net/yr6a5xr8/检查外部资源

Answer 2

要在用户与输入字段交互时显示日期时间选择器，请在首次初始化日期时间选择器时将其 allowInputToggle 属性设置为 true:

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

Bootstrap 日期时间选择器显示

Bootstrap Datetimepicker Display

html

javascript

jquery

datetimepicker

twitter-bootstrap