Jquery UI datepicker. Desativar matriz de datas


84

Tenho tentado encontrar uma solução para o meu problema Jquery ui datepicker e não estou tendo sorte. Aqui está o que estou tentando fazer ...

Eu tenho um aplicativo em que estou fazendo um PHP complexo para retornar uma matriz JSON de datas que desejo BLOQUEAR do Jquery UI Datepicker. Estou retornando este array:

["2013-03-14","2013-03-15","2013-03-16"]

Não há uma maneira simples de dizer simplesmente: bloquear essas datas do selecionador de data?

Eu li a documentação da IU e não vejo nada que me ajude. Alguém tem alguma ideia?






Alguém pode me indicar perguntas semelhantes, mas usando Materializar selecionador de data?
naz786

Respostas:


209

Você pode usar beforeShowDay para fazer isso

O exemplo a seguir desativa as datas de 14 de março de 2013 a 16 de março de 2013

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Demo: Fiddle


1
Eu tipo de ver onde você está indo com isso. Como eu incorporaria minha variedade de datas, no entanto.
Daniel White

14
UAU. Você é um gênio, mano. Eu não sei por que isso ainda não está nas postagens de estouro de pilha para esta questão, uma vez que foi perguntado um milhão de vezes. Todos os exemplos postados acima são muito complicados, isso é bom e simples. 5 estrelas. Obrigado.
Daniel White

Eu baixei o código jqueryui.com/download/… mas quando estou integrando o código acima nele não está funcionando, por favor, ajuda
Sam

Um voto positivo não é suficiente. Algumas pessoas tornam as coisas mais complicadas do que precisam ser. Muito obrigado por um snippet simples e funcional. Muito útil.
0112

4
Se você também deseja excluir fins de semana além dessas datas personalizadas, substitua a linha de retorno por:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

20

O IE 8 não tem a função indexOf, então usei jQuery inArray.

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
    }
});

6
@ChristopherStrydom você ficaria surpreso com quantas pessoas ainda o usam.
euther

3
Isso ocorre porque o IE8 é o navegador do IE mais recente que será executado no WinXP (SP3).
JosephK

No entanto, ele oferece suporte à função indexOf () em uma string para encontrar a posição de uma substring nessa string.
Wezy

9

Se você também deseja bloquear domingos (ou outros dias), bem como a matriz de datas, uso este código:

jQuery(function($){

    var disabledDays = [
       "27-4-2016", "25-12-2016", "26-12-2016",
       "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
    ];

   //replace these with the id's of your datepickers
   $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
      beforeShowDay: function(date){
         var day = date.getDay();
         var string = jQuery.datepicker.formatDate('d-m-yy', date);
         var isDisabled = ($.inArray(string, disabledDays) != -1);

         //day != 0 disables all Sundays
         return [day != 0 && !isDisabled];
      }
   });
});   

1
$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});

1

beforeShowDate não funcionou para mim, então fui em frente e desenvolvi minha própria solução:

$('#embeded_calendar').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker('getDate');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }

Podemos fazer a mesma coisa em dateRangePicker ??
Sunil Rawat

1

Para DD-MM-AA use este código:

var array = ["03-03-2017 ', '03 -10-2017', '03 -25-2017"]

$('#datepicker').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [ array.indexOf(string) == -1 ]
    }
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}

É possível para daterangepicker, eu quero desabilitar uma matriz de datas no selecionador de intervalo de datas ??
Sunil Rawat

Você pode definir sua pergunta?
Dierig Patrick

Tenho um seletor de intervalo de datas, supondo: 01/01/2017 - 31/03/2017. Quero destacar algumas datas e uma série de datas personalizadas entre esse intervalo. no calendário de intervalo de datas. $ datas = ['02 /01/2017','03/01/2017'...till] essas datas. é possível?
Sunil Rawat

como no datepicker, podemos usar a função beforeShowDay para este propósito, o que há no date-range-picker: daterangepicker.com
Sunil Rawat

1

Se você deseja desabilitar determinada (s) data (s) no jquery datepicker, aqui está uma demonstração simples para você.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.