How to display only dates defined in datepicker

5

I'm using a lib called MultiDatesPicker similar to DatePicker of JqueryUI . Currently in the panel I can select the dates I want, it works normally, however the same calendar is displayed for the user to choose one of the available dates, but I can not set up a logic to display only the dates that I have 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 the user should only display those 20 dates.

Through this example in the doc I can auto select the dates I bring from the DB, but I wanted the others to be disabled. If you have another LIB that facilitates this I might be using it as well.

    
asked by anonymous 27.07.2018 / 17:36

1 answer

1

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 .

    
01.08.2018 / 18:13