javascript – Changing date to be shown in datepicker

Question:

I'm making a calendar with datepicker , and I need this calendar to show only Mondays, and most importantly, to show one month after the current date, that is, it will have to show from 27/05 only on Mondays.

I've already managed to make him show on Mondays, now my question is, how can I make him show from next month on?

JS code:

$(function() {
          $( "#data-inicio" ).datepicker({
             beforeShowDay: function(date){ 
              return [date.getDay() == 1,""]} 
          });

Answer:

You can add minDate to set the minimum selection date, beforeShowDay to enable the available days (you've already got it, but just to exemplify everything):

$(function() {
    // Data atual, já considerado a partir do próximo mês
    var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 30);
    // Verifica se esta data cai em uma segunda-feira
    // Se não cair, precisa obter a próxima segunda depois deste dia
    if (today.getDay() != 1) {
        // Primeiro dia do próximo mês para calcular quantos dias faltam para o mês atual acabar
        var nextMonth = new Date(today.getFullYear(), today.getMonth() + 1, 1);
        // Total de dias para acabar o mês. A subtração é feita em milessegundos, então as multiplicações são realizadas para obter este valor em dias
        var days = Math.floor((nextMonth - today) / (1000*60*60*24))
        // Se faltam menos de 7 dias para virar o mês, quer dizer que não existirá outra segunda-feira neste, então a data mínima do datepicker será no próximo mês.
        if (days < 7)
            today = new Date(today.getFullYear(), today.getMonth(), today.getDate() + days);
    }

    $("#datepicker").datepicker({
        beforeShowDay: function(date){ return [date.getDay() == 1, ""] },
        minDate: today
    });
});

JSFiddle

Scroll to Top