Controlling range of years, months and dates in bootstrap datepicker using Javascript

Question

Am working on an application whereby am using bootstrap Datepicker to display the date. On the date I have validated whereby I only show the date of 18 years from current year (this mean any year below 18 years from now is not shown). For instance since we are in 2019 (it shows year upto 2001 and below : 2001, 2000, 1999 , 1998 ). This works fine.

The problem is I want to show years where on the lower limit should be 18 years and upper limit should be 85 years. For instance since we are in 2019 , it should show years between 1916 and 2001 where the difference is 85 years, (the same scenario should happen for months and days).

Markup

 // Javasript to control how the datepicker appears //dob (Must be over 18 years and less than 85 years) var maxBirthdayDate = new Date(); maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 ); maxBirthdayDate.setMonth(11,31) $( function() { $( "#dob " ).datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', maxDate: maxBirthdayDate, yearRange: '1900:'+maxBirthdayDate.getFullYear(), }); }); //End dob 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/> <-- Markup --> <div class="form-line"> <input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required> </div> 

Answer 1

Try this....using startDate and endDate

  var maxBirthdayDate = new Date(); maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 ); maxBirthdayDate.setMonth(11,31); var mindate = new Date(); mindate.setFullYear( maxBirthdayDate.getFullYear() - 85 ); mindate.setMonth(11,31); $( function() { $( "#dob " ).datepicker({ changeMonth: true, changeYear: true, dateFormat: 'yy-mm-dd', //yearRange: '1900:'+maxBirthdayDate.getFullYear(), startDate: mindate, endDate: maxBirthdayDate }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"/> <-- Markup --> <div class="form-line"> <input type="text" placeholder="Date of Birth *" class="form-input dateTextBox" name="dob" id="dob" value="#" required> </div>