Bootstrap Datetimepicker

Pro Component

We have created the design of the date-time picker made by Eonasdan. We have changed the colors, typography and buttons, so it can look like the rest of the dashboard.

For more information please check Full Github Documentation.

Here is a coded example:

Datetime Picker

<!-- input with datetimepicker -->
<div class="form-group">
  <label class="label-control">Datetime Picker</label>
  <input type="text" class="form-control datetimepicker" value="07/10/2020"/>
</div>

Usage

In order to use this plugin on your page you will need to include the following scripts.

<script src="/assets/js/plugins/moment.min.js"></script>
<script src="/assets/js/plugins/bootstrap-datetimepicker.min.js"></script>

Initialization

<!-- javascript for init -->
$('.datetimepicker').datetimepicker({
  icons: {
    time: "fa fa-clock-o",
    date: "fa fa-calendar",
    up: "fa fa-chevron-up",
    down: "fa fa-chevron-down",
    previous: 'fa fa-chevron-left',
    next: 'fa fa-chevron-right',
    today: 'fa fa-screenshot',
    clear: 'fa fa-trash',
    close: 'fa fa-remove'
  }
});