Javascript 引导日期时间选择器显示_Javascript_Jquery_Html_Twitter Bootstrap_Datetimepicker

Javascript 引导日期时间选择器显示

javascript jquery html twitter-bootstrap

Javascript 引导日期时间选择器显示,javascript,jquery,html,twitter-bootstrap,datetimepicker,Javascript,Jquery,Html,Twitter Bootstrap,Datetimepicker,我正在尝试实现一个引导datetimepicker。现在我的工作正常，但当我尝试导航月份时，月份名称彼此重叠，如下所示：以下是我正在使用的代码： <!DOCTYPE html> <html lang="en"> <head> <title>TEST</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid

我正在尝试实现一个引导datetimepicker。现在我的工作正常，但当我尝试导航月份时，月份名称彼此重叠，如下所示：

以下是我正在使用的代码：

<!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>


试验
$（函数（）{$（'#datetimepicker1'）.datetimepicker（）；}）；

可能值得注意的是，所有样式表和脚本都是最新的版本，除了倒数第二个脚本，它有一个版本3.1.3可用，但由于某种原因，当我使用这个版本时，datetimepicker根本不起作用

此外，我如何使其在用户单击文本字段（以及图示符图标）时显示日期选择器？现在，它只在用户单击字形图标而不是文本字段时才起作用。

好的，所以没有什么问题。我想主要是将datepicker与datetimepicker混合使用。您应该这样设置区域设置

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

此小提琴工作正常检查外部资源要在用户与输入字段交互时显示日期时间选择器，请在首次初始化日期时间选择器时将其属性设置为

true

：

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

为什么要调用bootstrap-datepicker.min.js两次？尝试删除额外的datetimepicker.min.js调用。同时检查这把小提琴，我取消了额外的呼叫。它仍然存在问题。那把小提琴也有同样的问题！可能与我的浏览器设置有关？请尝试在其他浏览器中检查代码。除非调用其他代码或css，否则这应该可以工作？