Javascript 1个HTML页上的多个日期时间选择器不工作_Javascript_Jquery_Html_Twitter Bootstrap

Javascript 1个HTML页上的多个日期时间选择器不工作

javascript jquery html twitter-bootstrap

Javascript 1个HTML页上的多个日期时间选择器不工作,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我试图在我的HTML页面上使用多个日期时间选择器来捕获“开始日期”和“结束日期” 请参见下面的我的HTML <Head>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" hr

我试图在我的HTML页面上使用多个日期时间选择器来捕获“开始日期”和“结束日期”

请参见下面的我的HTML

<Head>
    <!-- LINKS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

    <!-- SCRIPTS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
    <script>
        $(function() {
          $('#datetimepicker1').datetimepicker();
        });
    </script>
    <title>MyPage</title>
</head>


$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
});
我的网页

这是尸体

<body>
 <div class='col-8'>
        <h1 class="mt-2">Date Form</h1>
        <hr class="mt-0 mb-4">
        <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 class="form-group">
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control"/>
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>


日期表

第一个日期时间选择器工作正常，但第二个日期时间选择器上加载日历的按钮不工作。有人能指出代码有什么问题吗？

这个问题是因为您只在

#datetimepicker1

元素上实例化了datetimepicker

如果要在这两个控件上都使用控件，请尝试改用类选择器：

$（函数（）{
$（'.input group.date'）.datetimepicker（）；
});

日期表

您尚未初始化第二个日期时间选择器
<script>
    $(function() {
      $('#datetimepicker1').datetimepicker();
      $('#datetimepicker2').datetimepicker(); // <<<<< add this line 
    });
</script>


$（函数（）{
$（'#datetimepicker1'）。datetimepicker（）；
$（“#datetimepicker2”）.datetimepicker（）；//ID用于单个元素。如果要创建具有特定规则集的通用日期选择器，请使用类。