Question

我正在尝试在HTML页面上使用多个dateTime选择器来捕获“开始日期”和“结束日期”。

请在下面查看我的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>

这是尸体

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

第一个日期时间选择器工作正常，但是在第二个日期时间选择器上，用于加载日历的按钮不起作用。有人可以建议代码有什么问题吗？

Answer 1

问题是因为您仅实例化了master_accountname元素上的datetimepicker。

如果要同时控制它们，请尝试使用类选择器：

#datetimepicker1

$(function() {
  $('.input-group.date').datetimepicker();
});

Answer 2

您尚未初始化第二个日期时间选择器

<script>
    $(function() {
      $('#datetimepicker1').datetimepicker();
      $('#datetimepicker2').datetimepicker(); // <<<<< add this line 
    });
</script>

1个HTML页面上的多个datetimePickers不起作用

2 个答案: