<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script> <script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/development/src/js/bootstrap-datetimepicker.js"></script> <link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <h2>Bootstrap DatetimePicker Start & End Date </h2> <div class="form-horizontal"> <div class="row"> <div class="col-sm-8"> <div class="form-group"> <div class="col-sm-3 control-label"> <label for="startdate" class="control-label">StartDate</label> </div> <div class="col-sm-5"> <div class="input-group date" id="startdate"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon-calendar glyphicon"></span> </span> </div> </div> </div> </div> </div> <div class="row"> <div class="col-sm-8"> <div class="form-group"> <div class="col-sm-3 control-label"> <label for="enddate">EndDate</label> </div> <div class="col-sm-5"> <div class="input-group date" id="enddate"> <input type="text" class="form-control" /> <span class="input-group-addon"> <span class="glyphicon-calendar glyphicon"></span> </span> </div> </div> </div> </div> </div> </div> </div>

$(function () { $('#startdate,#enddate').datetimepicker({ useCurrent: false, format: 'MM-DD-YYYY', minDate: moment() }); $('#startdate').datetimepicker().on('dp.change', function (e) { var incrementDay = moment(new Date(e.date)); incrementDay.add(1, 'days'); $('#enddate').data('DateTimePicker').minDate(incrementDay); $(this).data("DateTimePicker").hide(); }); $('#enddate').datetimepicker().on('dp.change', function (e) { var decrementDay = moment(new Date(e.date)); decrementDay.subtract(1, 'days'); $('#startdate').data('DateTimePicker').maxDate(decrementDay); $(this).data("DateTimePicker").hide(); }); });