Datepicker - Set maximum date to 18 years ago from current date

Question

HTML:

<input type="text" name="date" id="datepicker" autocomplete="off">

JS:

var maxBirthdayDate = new Date();
maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18 );

$( "#datepicker" ).datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    maxDate: maxBirthdayDate
});

JSFIDDLE:

https://jsfiddle.net/z13au9t6/

PROBLEM: Although setting maxDate to 18 years ago is working, I cannot now select year below 1990 and months above August.

Answer 1

Use the year range property, set the month and date to the end of the year to go past august

var maxBirthdayDate = new Date();
maxBirthdayDate.setFullYear( maxBirthdayDate.getFullYear() - 18,11,31);
$( "#datepicker" ).datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    maxDate: maxBirthdayDate,
  yearRange: '1950:'+maxBirthdayDate.getFullYear(),
});

demo

Answer 2

To achieve this you can use yearRange. To make maintenance easier you can use ranges relative to the current date by using the c character in the format string, like this:

$("#datepicker").datepicker({
  dateFormat: 'dd.mm.yy',
  changeMonth: true,
  changeYear: true,
  yearRange: '-99:-18'
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input type="text" name="date" id="datepicker" autocomplete="off">