<head>
<title>Bootstrap Date Time Picker Example</title>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="moment-with-locales.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="bootstrap.min.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap-datetimepicker.css"/>
<script type="text/javascript">
$(function () {
var start = new Date();
start.setMinutes(start.getMinutes() + 20);
var start_value = start.getFullYear() + "-" + (start.getMonth() + 1) + "-" + start.getDate();
start_value += " " + start.getHours() + ":" + start.getMinutes();
start.setDate(start.getDate() + 1);
$('#datetimepicker1').datetimepicker({
defaultDate: start_value,
format: 'DD-MM-YYYY hh:mm A',
disabledDates: [
start
],
daysOfWeekDisabled: [0, 6],
sideBySide: false,
showTodayButton: true,
showClear: true,
showClose: true,
onSelect: function () {
var minDate = $(this).datepicker('getDate');
$('#datetimepicker2').datepicker( "option", "minDate", minDate);
}
});
$('#datetimepicker2').datetimepicker({
defaultDate: start_value,
format: 'DD-MM-YYYY hh:mm A',
disabledDates: [
start
],
daysOfWeekDisabled: [0, 6],
sideBySide: false,
showTodayButton: true,
showClear: true,
showClose: true
});
$('#datetimepicker3').datetimepicker({
format: 'DD-MM-YYYY hh:mm A'
});
$('#datetimepicker4').datetimepicker({
useCurrent: false,
format: 'DD-MM-YYYY hh:mm A'
});
$("#datetimepicker3").on("dp.change", function (e) {
$('#datetimepicker4').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker4").on("dp.change", function (e) {
$('#datetimepicker3').data("DateTimePicker").maxDate(e.date);
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input id="datetimepicker2" type="text" class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class='col-md-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<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-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker4'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</body>
