Bootstrap datepicker maxdate not working

Question

jQuery:

 $("#min").datepicker({maxDate: 0, changeMonth: true, changeYear: true }); $("#max").datepicker({maxDate: 0, changeMonth: true, changeYear: true }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <input type="text" class="form-control" name="from" id="min"> <span class="input-group-addon"> to </span> <input type="text" class="form-control" name="to" id="max"> 

Anyone can please tell me Why this not working and How can I solve this?

Answer 1

In this below example will help you here I have changed maxDate:0 to startDate:01/10/2018 and endDate:02/10/2018 so your max date will be feb 10 2018

 $("#min").datepicker({ startDate: "01/10/2018", endDate: "02/10/2018", changeMonth: true, changeYear: true }); $("#max").datepicker({ startDate: "01/10/2018", endDate: "02/10/2018", changeMonth: true, changeYear: true }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script> <input type="text" class="form-control" name="from" id="min"> <span class="input-group-addon"> to </span> <input type="text" class="form-control" name="to" id="max"> 

Answer 2

Try this snippet. Added validations as well.

 function populateEndDate() { var date2 = $('#max').datepicker('getDate'); date2.setDate(date2.getDate() + 1); $('#max').datepicker('setDate', date2); $("#max").datepicker("option", "minDate", date2); } $(document).ready(function() { $("#min").datepicker({ dateFormat: "dd-M-yy", minDate: 'dateToday', onSelect: function(date) { populateEndDate(); } }).datepicker("setDate", new Date()); $('#max').datepicker({ dateFormat: "dd-M-yy", minDate: 1, onClose: function() { var dt1 = $('#min').datepicker('getDate'); var dt2 = $('#max').datepicker('getDate'); if (dt2 <= dt1) { var minDate = $('#max').datepicker('option', 'minDate'); $('#max').datepicker('setDate', minDate); } } }).datepicker("setDate", new Date()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" /> <label for="">start</label> <input type="text" class="form-control" id="min" name="start"> <label for="">end</label> <input type="text" class="form-control" id="max" name="end">