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
.