<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" rel="stylesheet" type="text/css" /> <div class="container"> <div class="row"> <div class="form-group from-date col-sm-4"> <label for="startDate"><b>Past</b></label> <input type="text" id="date-restriction-from" class="form-control pickdate" name="start" value="" placeholder="ex: 01 January 1900" onkeydown="return false"/> </div> <div class="form-group from-date col-sm-4"> <label for="startDate"><b>Present</b></label> <input type="text" id="date-restriction-now" class="form-control pickdate" name="start" value="" placeholder="ex: 01 January 1900" onkeydown="return false"/> </div> <div class="form-group to-date col-sm-4"> <label for="endDate"><b>Future</b></label> <input type="text" class="form-control pickdate" id="date-restriction-to" name="end" value="" placeholder="ex: 01 January 1900" onkeydown="return false"/> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" type="text/javascript"></script>

$(function (){ var date = new Date(); var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); var daysback = new Date(date.getFullYear(), date.getMonth(), date.getDate() - 30); $('#date-restriction-from').datepicker({ autoclose: true, endDate: today, format: 'dd MM yyyy' }).datepicker('setDate', daysback); $('#date-restriction-now').datepicker({ autoclose: true, startDate: today, format: 'dd MM yyyy' }).datepicker('setDate', today); $('#date-restriction-to').datepicker({ autoclose: true, endDate: new Date(), format: 'dd MM yyyy' }).datepicker('setDate', today); $('.icon-arrow-left').addClass('glyphicon glyphicon-chevron-left'); $('.icon-arrow-right').addClass('glyphicon glyphicon-chevron-right'); });