javascript - 日期时间选择器 bootstrap Tempus Dominus

Question

我似乎无法让日期时间选择器工作。当我点击它时，它什么也没做。

我已经从 git 页面将 CDN 值导入到 head 和 JS 中。但是，当我单击该字段时，它什么也没做。我在 Bootstrap 方面不是很有经验，尤其是导入库。

'html 头'

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