How to display dates set in datepicker only

Question

I’m wearing a lib calling for Multidatespicker similar to the DatePicker of JqueryUI. Currently in the panel I can select the dates I want, works normally, but the same calendar is displayed for the user to choose one of the available dates, but I can’t assemble a logic to display only the dates I registered.

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

This is the code used in the panel, I select up to 20 dates, and pro user should be displayed only those 20 dates.

Through this example on the website doc I can auto select the dates I bring from the BD, but I wanted the others to be disabled. If you have another LIB that facilitates this I might be using too.

Answer 1

I do not know well the library you are using, but taking a look at the DOC I realized that it uses the same functions of Jquery UI, with some changes only.

Logic

Jqueryui has a property called beforeShowDay, as stated in the DOC

A function that uses a date as a parameter and must return a matrix [...]

This property returns a matrix with 3 elementros 0,1,2, what interests us is the first index

True or False - indicating whether a date is selectable or not

Knowing this we can conclude that, Datepicker itself already provides us a method that will produce 80% of what you need, allowing or not that such date be selected.

Considering that you somehow have the values (dates) already available, we would have 100% of everything to complete our logic and go into practice.

Practising

First of all, I will be considering that you are working on the format dd/mm/yy

The first part of this scope is to have the dates available in an array (if you are bringing them directly from PHP to the JS as string, just use the function split to convert);

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

This array will be used to compare each date that is "provided" by the 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 finished, realize that a function has been created, which takes as parameter the object Date of datepicker. Within the function we have the variable datadopicker that gets the values dia, mês and ano.

By default the JS loads the date as 1/8/2018, the Slice in the function adds the 0 on day and month, getting 01/08/2018 or 10/08/2018

Finally, a check is made, with the following logic

If the date passed by Datepicker is also in the Dates array, make it selectable, otherwise leave it disabled.

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 doing this directly on JS, I used as an example for the answer to be clear, and not so long. If possible, click on div or input hidden and recover by JS.