4

Estou usando uma lib chamada MultiDatesPicker parecida com o DatePicker do JqueryUI. Atualmente no painel eu posso selecionar as datas que eu quero, funciona normalmente, porém o mesmo calendário é exibido para o usuário escolher uma das datas disponíveis, mas não consigo montar uma lógica para exibir apenas as datas que eu cadastrei.

$('.date').multiDatesPicker({
    minDate: 0, // today
    dateFormat: "yy-mm-dd",
    maxPicks: 20
});

Este é o código utilizado no painel, eu seleciono até 20 datas, e pro usuário deve ser exibido apenas essas 20 datas.

Através desse exemplo na doc do site consigo auto selecionar as datas que eu trago do BD, porém eu queria que as outras fossem desabilitadas. Caso tenha outra LIB que facilite isso eu posso estar usando também.

1
  • as datas que devem ser exibidas para o usuário são em sequência? Commented 1/08/2018 às 15:47

1 Resposta 1

1

Eu não conheço bem a biblioteca que você está usando, mas dando uma olhada na DOC percebi que ela usa as mesmas funções do Jquery UI, com algumas alterações apenas.

Lógica

O JqueryUI tem uma propriedade chamada beforeShowDay, que como consta na DOC

Uma função que usa uma data como parâmetro e deve retornar uma matriz [...]

Essa propriedade retorna uma matriz com 3 elementros 0,1,2, o que nos interessa é o primeiro índice

True ou False - indicando se uma data é ou não selecionável

Sabendo disso podemos concluir que, o próprio DatePicker já nos fornece um método que vai produzir 80% do que você precisa, permitindo ou não que tal data seja selecionada.

Considerando que você, de algum modo, tem os valores (datas) já disponíveis, teríamos 100% de tudo para concluir nossa lógica e partir para a prática.

Prática

Primeiro de tudo, estarei considerando que esteja trabalhando no formato dd/mm/yy

A primeira parte desse escopo é ter as datas disponíveis em um array (caso esteja trazendo diretamente do PHP para o JS como string, basta usar a função split para converter);

var Datas = ['11/07/2018', '01/08/2018'];

Esse array será utilizado para comparar cada data que é "fornecida" pelo BeforeShowDay, conforme expliquei na seção lógica.

function selecionavel(datadopicker) {
    var DataSecundaria = ('0' + datadopicker.getDate()).slice(-2) + "/" + ('0' + (datadopicker.getMonth() + 1)).slice(-2) + "/" + datadopicker.getFullYear();


    if ($.inArray(DataSecundaria , Datas) != -1) {
        return [true, ""];
    } else {
        return [false, ""];
    }
}

$( "#datepicker" ).datepicker({ beforeShowDay: selecionavel, dateFormat: 'dd/mm/yy' });

Com o escopo finalizado, perceba que foi criado uma função, que recebe como parâmetro o objeto Date do datepicker. Dentro da função temos a variável datadopicker que obtém os valores dia, mês e ano.

Por padrão o JS carrega a data como 1/8/2018, os slice na função adiciona o 0 no dia e no mês, ficando 01/08/2018 ou 10/08/2018

Por fim, é feito uma verificação, com a seguinte lógica

Se a data passada pelo DatePicker estiver também no array Datas, torne-a selecionável, caso contrário, deixa-a desativada.

Atualizado

Se as informações vêm do PHP pro HTML, tu pode fazer da seguinte forma

var Datas = '<?= $stringDoPhp ?>'; //no JS vai retornar algo como 'dd/mm/yy, dd/mm/yy';

Datas = Datas.split(','); //A partir daqui a var Datas já é um array ['dd/mm/yy', 'dd/mm/yy']

Abaixo está uma simulação do código acima

var Datas = '21/08/2018,22/08/2018';
Datas = Datas.split(',');

console.log(Datas);

Eu friamente não recomendo que faça isso diretamente no JS, usei como exemplo para a resposta ficar clara, e não tão longa. Se possivel carregue essas informações numa div ou input hidden e recupere pelo JS.

1
  • Obrigado, ficou bem mais fácil de entender com a explicação. Só tem um problema, as datas estão vindo do PHP, separadas por virgula, elas vão pra tabela do mesmo jeito que o próprio plugin já gera, como eu faria para implementar no JS?
    – Alexander
    Commented 1/08/2018 às 16:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .