Block Datepicker Date Range Javascript

Question

Blocking a date range using datepicker ?

Example, today is day 2, start by day, start by current day + 3 days and lock from day 20 forward of each month. maxDate blocks the next few months.

I tried using maxDate to test with the current month, but it blocks the next month

$("#data_aviso").datepicker({
        constrainInput: true,
        showOn: "button",
        minDate: '+3D',
        maxDate: new Date('2019-11-20'),
        changeMonth: true,
        changeYear: true,
        buttonImage: "../../imagens/calendario.png",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        onSelect: function(dateText, inst){

            //  VALIDA PARA NÃO DEIXAR PROGRAMAR NA SABADO E DOMINGO
            .....

        }
    });
});

I need a way to block a certain period of every month, of the current day + 3 days and after the 20th of every month, without blocking the next month.

Answer 1

You don’t need the option "minDate" and "maxDate". Use the option beforeShowDay as below:

beforeShowDay: function(date){
   var hoje = new Date(); // pega a data atual
   if ( date.getDate() > 20 || (date >= hoje.setDate(hoje.getDate()-1) && date <= hoje.setDate(hoje.getDate()+3)) ) return [false, ''];
   return [true, ''];
}

Will block every day after the 20th of each month or the current day +2 days forward.

See example:

$(document).ready(function() {
   $("#datepicker").datepicker({
      dateFormat: 'dd/mm/yy',
      changeMonth: true,
      changeYear: true,
      beforeShowDay: function(date){
         var hoje = new Date(); // pega a data atual
         if ( date.getDate() > 20 || (date >= hoje.setDate(hoje.getDate()-1) && date <= hoje.setDate(hoje.getDate()+3)) ) return [false, ''];
         return [true, ''];
      }
   });
})

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