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=".0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet"
    href=".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?

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./ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare./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?

• javascript
• html

Share Improve this question Follow asked Jul 31, 2019 at 16:37 XavierXavier 3311 gold badge11 silver badge44 bronze badges 6

• I get a console error saying you need to include Jquery. Trying including it in your <head> before the tempus dominus stuff – Bryan Commented Jul 31, 2019 at 16:47
• Okay I've included <script src="ajax.googleapis./ajax/libs/jquery/3.4.1/…> however it didn't change anything – Xavier Commented Jul 31, 2019 at 16:52
• Possible duplicate of bootstrap datetimepicker installation – John Doe Commented Jul 31, 2019 at 17:07
• $("#datetimepicker8") where is this element? – Mark Schultheiss Commented Jul 31, 2019 at 17:22
• which datetimepicker, please provide a reference – Mark Schultheiss Commented Jul 31, 2019 at 17:29

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 3

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./font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha256-98vAGjEDGN79TjHkYWVD4s87rvWkdWLHPs5MC3FvFX4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data-2012-2022.min.js"></script>

<script src="https://cdnjs.cloudflare./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>