Bootstrap Datetimepicker

-
Pro Component

Datetimepicker is a Bootstrap widget that helps you handle date and time data. We have created the design of the date-time picker widget made by Eonasdan. We have changed the colours, typography and buttons, so it can look like the rest of the dashboard.

Keep reading our Bootstrap Datetimepicker example and learn how to use this widget.

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>