引导日期时间选择器显示答案

【问题标题】：Bootstrap Datetimepicker Display引导日期时间选择器显示
【发布时间】：2015-07-07 21:54:08
【问题描述】：

我正在尝试实现一个引导日期时间选择器。现在我可以正常工作，但是当我尝试导航月份时，月份名称相互重叠，如下所示：

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 调用。还要检查这个小提琴jsfiddle.net/Lwkanjpx
我删除了额外的调用。它仍然有问题。那个小提琴也有同样的问题！也许它与我的浏览器设置有关？
尝试在其他浏览器中检查您的代码。除非您调用其他代码或 css，否则这应该可以工作？

标签： javascript jquery html twitter-bootstrap datetimepicker

【解决方案1】：

要在用户与输入字段交互时显示 datetimepicker，请在首次初始化 datetimepicker 时将其 allowInputToggle 属性设置为 true：

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

【讨论】：

【解决方案2】：

好的，所以问题很少。我猜主要将 datepicker 与 datetimepicker 混合使用。你应该像这样设置语言环境

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

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

【讨论】：