Bootstrap DateTimePicker

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

by sunil puvvada

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-md-5'>
        <div class="form-group">
            <div class='input-group date'>
                <input type='text' class="form-control" id='datetimepicker6' />
                <span class="input-group-addon" for="datetimepicker6">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
    </div>
    <div class='col-md-5'>
        <div class="form-group">
            <div class='input-group date' id='datetimepicker7'>
                <input type='text' 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

$(function () {
        $('#datetimepicker6').datetimepicker(
        {
        	allowInputToggle: true
        });
        $('#datetimepicker7').datetimepicker({ 
            allowInputToggle: true,
            format:'MMM-yyyy'
        });
        $("#datetimepicker6").on("dp.change", function (e) {
            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);
        });
        $("#datetimepicker7").on("dp.change", function (e) {
            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
        });
    });