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.

Usage

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

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

Initialization

<script type="text/javascript">
    $(function () {
        $('#datetimepicker1').datetimepicker({
          icons: {
            time: "fa fa-clock",
            date: "fa fa-calendar-day",
            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'
          }
        });
    });
</script>

Example:

<div class="form-group">
    <div class='input-group date' id='datetimepicker1'>
        <input type='text' class="form-control" />
        <span class="input-group-addon input-group-append">
            <button class="btn btn-outline-primary" type="button" id="button-addon2">  <span class="fa fa-calendar"></span></button>
        </span>
    </div>
</div>