Inserting holidays in jquery datepicker?

Asked

Viewed 1,435 times

2

I have a method that alters the datepicker of jquery and inserts some special days (in the case of holidays of the state of RJ), when selecting a holiday, an Alert with the day is launched, however, only this happens, I wanted to know how to block the day too.

     now = new Date();
    var feriados, i, dia;

    <!-- Array com os feriados -->
    var feriados = [
        "01/01/" + now.getFullYear() + " - Confraternização Universal",
        "08/01/" + now.getFullYear() + " - São Sebastião",

        //Fevereiro
        "09/02/" + now.getFullYear() + " - Carnaval",
        "10/02/" + now.getFullYear() + " - Cinzas",

        //Março
        "01/03/" + now.getFullYear() + " - Aniversário da Cidade",
        "08/03/" + now.getFullYear() + " - Dia Internacional da Mulher",
        "23/03/" + now.getFullYear() + " - Paixão de Cristo",

        //Abril
        "19/04/" + now.getFullYear() + " - Dia do índio",
        "21/04/" + now.getFullYear() + " - Tiradentes",
        "22/04/" + now.getFullYear() + " - Descobrimento do Brasil",
        "23/04/" + now.getFullYear() + " - Dia de São Jorge",

        //Maio
        "01/05/" + now.getFullYear() + " - Dia do Trabalho",
        "28/05/" + now.getFullYear() + " - Corpus Cristi",

        //Junho

        //Agosto
        "14/08/" + now.getFullYear() + " - Dia dos Pais",

        //Setembro
        "07/09/" + now.getFullYear() + " - Independência do Brasil",

        //Outubro
        "12/10/" + now.getFullYear() + " - Nsa. Sra. Aparecida",
        "15/10/" + now.getFullYear() + " - Dia dos Professores",
        "19/10/" + now.getFullYear() + " - Dia do Comércio",
        "20/10/" + now.getFullYear() + " - Dia do funcionário Público",

        //Novembro
        "02/11/" + now.getFullYear() + " - Finados",
        "15/11/" + now.getFullYear() + " - Proclamação da Republica",
        "19/11/" + now.getFullYear() + " - Dia da Bandeira",
        "20/11/" + now.getFullYear() + " - Dia da Consciência Negra/Zumbi dos Palmares",

        //Dezembro
        "25/12/" + now.getFullYear() + " - Natal"
    ];

   <!-- Array com os Dias -->
    var dia = [
          "01/01/" + now.getFullYear(),
          "08/01/" + now.getFullYear(),

          //Fevereiro
          "09/02/" + now.getFullYear(),
          "10/02/" + now.getFullYear(),

          //Março
          "01/03/" + now.getFullYear(),
          "08/03/" + now.getFullYear(),
          "23/03/" + now.getFullYear(),

          //Abril
          "19/04/" + now.getFullYear(),
          "21/04/" + now.getFullYear(),
          "22/04/" + now.getFullYear(),
          "23/04/" + now.getFullYear(),

          //Maio
          "01/05/" + now.getFullYear(),
          "28/05/" + now.getFullYear(),

          //Junho

          //Agosto
          "14/08/" + now.getFullYear(),

          //Setembro
          "07/09/" + now.getFullYear(),

          //Outubro
          "12/10/" + now.getFullYear(),
          "15/10/" + now.getFullYear(),
          "19/10/" + now.getFullYear(),
          "20/10/" + now.getFullYear(),

          //Novembro
          "02/11/" + now.getFullYear(),
          "15/11/" + now.getFullYear(),
          "19/11/" + now.getFullYear(),
          "20/11/" + now.getFullYear(),

          //Dezembro
          "25/12/" + now.getFullYear(),
    ];

$( Function() {

    $('#Data_ProximoContato').datepicker({
        inline: true,
        dateFormat: "dd/mm/yy",
        onSelect: function(dateText, inst){

            for(i=0; i<feriados.length; i++){//cria uma lista com os feriados

                if(dia[i]===dateText){//compara a data selecionada no datepicker com o array dia
                     alert("Cuidado Feriado! \n" + feriados[i]); //imprime o alert com o feriado equivalente a data selecionada
                    }
            }
    }
    });
   });

  • I edited the answer. More readable like this

1 answer

3


Should use beforeShowDay choke:

$('#Data_ProximoContato').datepicker({
  inline: true,
  dateFormat: "dd/mm/yyyy",
  beforeShowDay: function(dateText, inst) {
    var datepickerDay = ('0' + dateText.getDate()).slice(-2) + '/' + ('0' + (dateText.getMonth()+1)).slice(-2) + '/' + dateText.getFullYear();
    if(dias.indexOf(datepickerDay.trim()) > -1) {
      return [false, "", feriados[dias.indexOf(datepickerDay)].split('-')[1]];
    }
    return [true, "", "disponivel"];
  },
});
$(document).on('click', '#ui-datepicker-div .ui-state-disabled', function() {
  alert('Feriado');
});

EXAMPLE complete in jsfiddle

  • Thank you very much Miguel, still stayed show, I do not understand much pq I’m starting to use jquery more thoroughly, I saw that the amount of Ys dateformat increase the amount of years, the code is running smooth, but need to show which is the holiday, I tried to adapt the two codes, but it didn’t work out so well... You know how I can do that?

  • If you leave your mouse on top appears the holiday that is @Murillofilho_19. Glad I helped

  • Sensational!!!!! I hadn’t noticed that... Thank you very much!!! Vlw Miguel

Browser other questions tagged

You are not signed in. Login or sign up in order to post.