Tempus Dominus Bootstrap

Tempus Dominus Bootstrap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tempusdominus-bootstrap@latest/build/css/tempusdominus-bootstrap.css">
<script src="https://unpkg.com/tempusdominus-bootstrap@latest/build/js/tempusdominus-bootstrap.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <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" data-toggle="datetimepicker" />
          <div id="widgetParentId"></div>
          <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="fa fa-calendar"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.container {
  padding: 80px;
}

JavaScript

$(function() {
  $("#datetimepicker1").datetimepicker();
});