Configure minDate and maxDate in jQuery-UI Datepicker

Question

I wanted to know how to properly use the maxDate and the minDate.

Ex.: My calendar starts in 1970 and ends in 2017:

$(document).ready(function(){
                  $('.datepicker').datepicker({              
                    format:'yyyy-mm-dd',
                    i18n:{
                      months: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
                      monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                      weekdays: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
                      weekdaysAbbrev: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
                      weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
                      today: 'Hoje',
                      clear: 'Limpar',
                      close: 'Pronto',
                      labelMonthNext: 'Próximo mês',
                      labelMonthPrev: 'Mês anterior',
                      labelMonthSelect: 'Selecione um mês',
                      labelYearSelect: 'Selecione um ano',
                      selectMonths: true,
                      selectYears: 4,
                      cancel: 'Cancelar',
                      clear: 'Limpar',  
                      },
                    });
                });

Answer 1

In Datepicker, the attributes maxDate and minDate define the maximum and minimum date consecutively that the user can select in the calendar.

There are 3 different ways to configure these delimiters:

String in period form:

$( ".selector" ).datepicker({
  maxDate: "+2y +1m +1w +4d",
  minDate: "-1m -1w -2d"
});

Where +2y +1m +1w +4d represents 2 years, 1 month, 1 week and 4 days from today (current day).

Caption:

• y for years;
• m for months;
• w for weeks;
• and d for days.

---

Class object Date:

You can also pass a class object Date:

$( ".selector" ).datepicker({
  maxDate: new Date(2019, 12, 31),
  minDate: new Date(2005, 1, 10)
});

Where Date(2019, 12, 31) is equivalent to 31 December 2019.

Recommended reading: Javascript - Date

---

Number of days:

$( ".selector" ).datepicker({
  maxDate: 15,
  minDate: -20
});

Where 15 represents 15 days from today (current day) and -20 represents 20 days before today (current day) (-1 it is yesterday and 1 it’s tomorrow).

---

All 3 methods are described in the documentation (link below). Now just apply on your own Datepicker!

Recommended reading: jQuery-UI Datepicker - maxDate

Recommended reading: jQuery-UI Datepicker - minDate