Tempus Dominus For Bootstrap 4 Master

by Roman Joseph Rimorin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/tempusdominus/bootstrap-4/master/build/js/tempusdominus-bootstrap-4.js"></script>
<link rel="stylesheet" href="https://rawgit.com/tempusdominus/bootstrap-4/master/build/css/tempusdominus-bootstrap-4.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid">
  <div class="row mt-3">
    <div class="col">
      <div class="card bg-light mb-3">
        <div class="card-header">Calendar POC</div>
        <div class="card-body">
          <div class="m-3">
            <div class="row">
              <div class="col">
                <h5 class="card-title">Default Date and time</h5>
                <p class="card-text">Minimum setup with date and time picker.</p>
                <div class="form-group">
                  <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
                    <span class="input-group-btn"  data-target="#datetimepicker1" data-toggle="datetimepicker">
                      <button class="btn btn-secondary" type="button"><i class="fa fa-calendar"></i></button>
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col">
                <h5 class="card-title">Date Only</h5>
                <div class="form-group">
                  <div class="input-group date"...

JavaScript

$(function() {
  $('#datetimepicker1').datetimepicker();


  $('#datetimepicker3').datetimepicker({
    format: 'LT'
  });

  $('#datetimepicker4').datetimepicker({
    format: 'L'
  });

  $('#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);
  });

	$('#datetimepicker5').datetimepicker();

});