Bootstrap DateTimePicker

Based on https://github.com/tarruda/bootstrap-datetimepicker

by Santosh J

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div class="container">
    <div class='col-xs-6'>
        <div class="form-group">
            <div class='input-group date'>
                <input type='text' id='datetimepicker6' class="form-control" /> <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
</span>
            </div>
        </div>
    </div>
    <div class='col-xs-6'>
        <div class="form-group">
            <br/>
            <div class='input-group date'>
                <input type='text' id='datetimepicker7' class="form-control" /> <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
</span>
            </div>
        </div>
    </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;
}
.bootstrap-datetimepicker-widget > ul {
    list-style-type: none;
    margin: 0;
}
.bootstrap-datetimepicker-widget .timepicker-hour, .bootstrap-datetimepicker-widget .timepicker-minute, .bootstrap-datetimepicker-widget .timepicker-second {
    width: 100%;
   ...

JavaScript

var timeDiff;
$(function () {
    $('#datetimepicker6').datetimepicker();
    $('#datetimepicker7').datetimepicker({
        useCurrent: false //Important! See issue #1075
    });
    $("#datetimepicker6").on("dp.change", function (e) {
        if (timeDiff) {
            $('#datetimepicker7').data("DateTimePicker").date(e.date.add(timeDiff, 's'));
            $('#datetimepicker7').data("DateTimePicker").minDate(false);
        } else $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
    });
    $("#datetimepicker7").on("dp.change", function (e) {
        //UpdateStartDate(new Date(e.date));
        var CurrStartDate = new Date($('#datetimepicker6').data("DateTimePicker").date());
        var CurrEndDate = new Date($('#datetimepicker7').data("DateTimePicker").date());
        if (CurrEndDate) {
            timeDiff = (CurrEndDate - CurrStartDate) / 1000;
        }
        $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
    });
});