Bootstrap 3 Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="https://rawgithub.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<div class='col-md-9'>
<div class="well" style="height:200px;">
<center><label><b>Add a new holiday</b></label></center>
<div class='col-md-1'>
<label><b>Start:</b></label>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker8'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-1'>
<label><b>End:</b></label>
</div>
<div class='col-md-5'>
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
JavaScript
$( document ).ready(function() {
$('#datetimepicker8').datetimepicker();
$('#datetimepicker9').datetimepicker();
$("#datetimepicker8").on("change.dp",function (e) {
$('#datetimepicker9').data("DateTimePicker").setStartDate(e.date);
});
$("#datetimepicker9").on("change.dp",function (e) {
$('#datetimepicker8').data("DateTimePicker").setEndDate(e.date);
});
});