I do not really know the library you're using, but by taking a look at DOC I realized that it uses the same functions as Jquery UI, with some changes only.
Logic
JqueryUI has a property called beforeShowDay
, which as in DOC
A function that uses a date as a parameter and should return an array
[...]
This property returns an array with 3 elements 0,1,2
, what interests us is the first index
True or False - indicating whether or not a date is selectable
Knowing this we can conclude that DatePicker itself already provides us with a method that will produce 80% of what you need, whether or not to allow that date to be selected.
Considering that you somehow have the values (dates) already available, we would have 100% of everything to complete our logic and go to practice.
Practice
First of all, I'll be considering working in the dd/mm/yy
The first part of this scope is to have dates available in an array (if you are bringing directly from PHP
to JS
as a string, just use the split
function to convert);
var Datas = ['11/07/2018', '01/08/2018'];
This array will be used to compare each date that is "provided" by BeforeShowDay, as I explained in the logical section.
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' });
With the scope complete, notice that a function was created, which receives as a parameter the object Date
of datepicker
. Within the function we have the variable datadopicker
that obtains the values dia
, mês
and ano
.
By default JS loads the date as 1/8/2018, the slice in the function adds 0 to the day and the month, getting 08/01/2018 or 08/08/2018
Finally, a check is made, with the following logic
If the date passed by the DatePicker is also in the Dates array, make it selectable, otherwise leave it off.
Updated
If the information comes from PHP pro HTML, you can do it as follows
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']
Below is a simulation of the above code
var Datas = '21/08/2018,22/08/2018';
Datas = Datas.split(',');
console.log(Datas);
I coldly do not recommend that you do this directly in JS, I used as an example for the answer to be clear, and not so long. If possible, load this information in div
or input hidden
and recover by JS
.