Bootstrap DateTimePicker 3.0.2 + Time Slider

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/momentjs/2.8.2/locales.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.js"></script>
<div style="height: 300px; padding: 20px;">
    <p>Modified Version of <a href="http://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank">Bootstrap DateTime Picker</a>:</p>
    
    <ul>
        <li>Support Auto Postion. Option: direction: auto|up|down</li>
        <li>New Option: useCurrent: true|false (If no value)</li>
        <li>New Option: showToday: true|false</li>
        <li>Auto Showing when click on any elements</li>
        <li>Auto set Date/Tiem view when value changed in input</li>
    </ul>
</div>
<div class="container">    
    <div class="row">
        <div class="col-sm-6 form-group">
            <label for="dd" class="sr-only">Time Pick</label>
            <div class="input-group" id="DateDemo">
                <input type="text" id="dd" name="dd" data-format="MM/DD/YYYY HH:mm" placeholder="date"  class="form-control"/>
                <span class="input-group-btn">
                    <button class="btn btn-green" type="button"><i class="icon-calendar"></i></button>
                </span>
            </div>
        </div>
        <div class="col-sm-6 form-group">
            <label for="tt" class="sr-only">Time Pick</label>
            <div class="input-group" id="TimeDemo">
                <input type="text" id="tt" name="InspectionDate" placeholder="time" class="form-control" />
                <span class="input-group-btn">
                    <button class="btn btn-green" type="button"><i class="icon-time"></i></button>
                </span>
            </div>
        </div>
   ...

CSS

/**
 * Datetimepicker for Bootstrap v3 - Modified
 * https://github.com/Eonasdan/bootstrap-datetimepicker/ 
 */

.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 250px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}

    /* RQI: Arrow for Bottom */
    .bootstrap-datetimepicker-widget.bottom:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 7px;
    }

    .bootstrap-datetimepicker-widget.bottom:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid white;
        position: absolute;
        top: -6px;
        left: 8px;
    }

    /* RQI: Arrow for Top */
    .bootstrap-datetimepicker-widget.top:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #ccc;
        border-top-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        bottom: -7px;
        left: 6px;
    }

    .bootstrap-datetimepicker-widget.top:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid white;
        position: absolute;
        bottom: -6px;
        left: 7px;
    }

    /* Days Column Width */
    .bootstrap-datetimepicker-widget .dow {
        width: 14.2857%;
    }

    .bootstrap-datetimepicker-widget.pull-right:before {
        left: auto;
        right: 6px;
    }

    .bootstrap-datetimepicker-widget.pull-right:after {
        left: auto;
        right: 7px;
    }

   ...