日期时间选择器引导Tempus Dominus

Question

我似乎无法让日期时间选择器工作。 当我点击它没有做任何事情。

我已经从git页面将CDN值导入头部和JS。 但是，当我点击该字段时，它没有做任何事情。 我在bootstrap方面不是很有经验，尤其是导入库。

'html head'

<script type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

'html body-dateTime picker'

<div class="form-group">
                    <label for="dates">State the time Interval where the tour can BEGIN</label>
                    <div class="input-group date" id="datetimepicker7" data-target-input="nearest">
                      <input type="datetime" class="form-control datetimepicker-input" data-target="#datetimepicker7"
                        placeholder="Early-Start" name="early" required />
                      <span class="error"></span>
                      <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                      </div>
                    </div>
                  </div>

'JS'

<script type="text/javascript">
    $(function () {
      $('#datetimepicker7').datetimepicker();
      $('#datetimepicker8').datetimepicker({
        useCurrent: false
      });
      $("#datetimepicker7").on("change.datetimepicker", function (e) {
        $('#datetimepicker8').datetimepicker('minDate', e.date);
      });
      $("#datetimepicker8").on("change.datetimepicker", function (e) {
        $('#datetimepicker7').datetimepicker('maxDate', e.date);
      });
    });
  </script>

当我点击该字段时它什么也没做。 它应该显示“弹出”日历。 我还需要进口其他东西吗？

Answer 1

这个插件似乎没有关于所有要求和特定版本的非常清晰的文档。 我在网站上做出的假设： https ： //tempusdominus.github.io/bootstrap-4/

 $(function() { $('#datetimepicker7').datetimepicker(); $('#datetimepicker7').on("change.datetimepicker", function(e) { $('#datetimepicker8').datetimepicker('minDate', e.date); }); $('#datetimepicker8').datetimepicker({ useCurrent: false }); $('#datetimepicker8').on("change.datetimepicker", function(e) { $('#datetimepicker7').datetimepicker('maxDate', e.date); }); }); 

 .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; position: relative; } 

 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/css/tempusdominus-bootstrap-4.min.css" integrity="sha256-XPTBwC3SBoWHSmKasAk01c08M6sIA5gF5+sRxqak2Qs=" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha256-xaF9RpdtRxzwYMWg4ldJoyPWqyDPCRD0Cv7YEEe6Ie8=" crossorigin="anonymous"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data-2012-2022.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.2/js/tempusdominus-bootstrap-4.min.js" integrity="sha256-z0oKYg6xiLq3yJGsp/LsY9XykbweQlHl42jHv2XTBz4=" crossorigin="anonymous"></script> <div class="container-fluid"> <div class="row"> <div class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content"> <div class="container"> <div class='col-md-5'> <div class="row"> <div class="form-group"> <div class="input-group date" id="datetimepicker7" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" /> <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class="input-group date" id="datetimepicker8" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" /> <div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker"> <div class="input-group-text"><i class="fa fa-calendar"></i></div> </div> </div> </div> </div> </div> </div> </div> </div> </div>