You can download full example from here
<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>