日期时间选择器引导Tempus Dominus

Question

I can't seem to get date-time picker to work. When I click it doesn't do anything.

I've imported the CDN values to the head and the JS from the git page. However when i click on the field it doesn't do anything. I'm not very experienced on bootstrap, especially importing libraries.

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

When I click on the field It doesn't do anything. It should show a "popup" calendar. Do I need to import anything else?

Answer 1

This plugin does not seem to have very clear documentation of all the requirements nor the specific versions. Assumptions made by me from the site: 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>