How to block data from array in pickadate?

[davidpazo]

I want to develop an application to manage the vacation of workers.

I try to block the datas that are assigned to th workers, so for this, I send the datas that are stored in the database, the array that i have is similar to this:

Array(8)
0: {area_id: "2", title: "asd", start: "2018-08-30", end: "2018-08-31", acept: "1"}
1: {area_id: "2", title: "asdf", start: "2019-03-12", end: "2019-03-15", acept: "1"}
2: {area_id: "2", title: "asdf", start: "2019-03-03", end: "2019-03-05", acept: "1"}
3: {area_id: "2", title: "asd", start: "2019-03-13", end: "2019-03-13", acept: "2"}
4: {area_id: "2", title: " ", start: "2019-03-11", end: "2019-03-11", acept: "1"}
5: {area_id: "2", title: " ", start: "2019-03-01", end: "2019-03-01", acept: "1"}
6: {area_id: "2", title: " ", start: "2019-03-06", end: "2019-03-09", acept: "1"}
7: {area_id: "2", title: "Hola", start: "2019-04-01", end: "2019-04-02", acept: "0"}
length: 8
__proto__: Array(0)

This is my code:

let forDeletion = [2, 3, 5]
    let arr = [1, 2, 3, 4, 5, 3]
    arr = arr.filter(item => !forDeletion.includes(item))
    // !!! Read below about array.includes(...) support !!!
    console.log(arr)
    // [ 1, 4 ] 

    var daysData = <?= json_encode($dataFechas) ?>;
    console.log(daysData);
    var newA = [];
    for( j of daysData){
      let start = moment(j["start"]);
      let end   = moment(j["end"]);

      for (let m = moment(start); m.diff(end, 'days') <= 0; m.add(1, 'days')) {
        newA[m.format('YYYY,MM,DD')] = j;
      }
    }
    console.log(newA);

$('#datefilter_inicio, #datefilter_fin').pickadate({

        // Strings and translations
        monthsFull: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
        monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dec'],
        weekdaysFull: ['Domingo', 'Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'],
        weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mier', 'Jue', 'Vier', 'Sab'],
        showMonthsShort: undefined,
        showWeekdaysFull: undefined,

        // Buttons
        today: 'Hoy',
        clear: 'Limpiar',
        close: 'Cerrar',

        // Accessibility labels
        labelMonthNext: 'Mes prox',
        labelMonthPrev: 'Mes ant',
        labelMonthSelect: 'Selecciona un mes',
        labelYearSelect: 'Selecciona  un año',

        // Formats
        format: 'd mmmm, yyyy',
        //Select months, years
        selectMonths: true,
        selectYears: true,

        formatSubmit: 'yyyy/mm/dd',
        hiddensufix: '',
        disable: [ 
            //true,
            //1, 4, 7,
            { from: [2019, 1, 17], to: 10}
        ],
    });

So, with the start and end data i want to block it in the datepicker, i see in the doc that i can to block weeks, or numbers, but i can´t insert the data in the datepicker, can anyone help me?

Thanks in advance for any help that we can provide me.

And sorry for my english, i except that explain fine.

[DanielRuf]

Hi @davidpazo,

did you try https://amsul.ca/pickadate.js/api/#method-set-disable-enable-dates

picker.set('disable', [
  // Using a range object with a “from” and “to” property
  { from: [2016,2,14], to: [2016,2,27] }
])
picker.set('enable', [
  { from: [2016,2,24], to: [2016,2,27] }
])

You can either use [YEAR,MONTH,DATE] or parse the with new Date()

[davidpazo]

Hi @DanielRuf sorry for delay in answer, i don´t have so much time to invert in this for my job, but i try it youw suggest and the same.

I got no errors but the data isn´t disable. I try with the examples in docs, if i put 1,3,7, or true, the picker is disable, but, if i pass an: { from: [2016,2,24], to: [2016,2,27] }

The picker ignored the datas to disable and worked normally.

Thank you for all.

[DanielRuf]

Hi @davidpazo,

for me it works using the API.

See https://codepen.io/DanielRuf/pen/eajvwj

[davidpazo]

Thanks for your example @DanielRuf i probe your code, and dont work in my application.

I have a laravel framework, with Robust template for views that has the pickadate.js in mi libraries, maybe i can call to a web api of pickadate?

I put the code like this:

` var $input = $('#datefilter_inicio, #datefilter_fin').pickadate();

var picker = $input.pickadate('picker')

picker.set'disable', [
    { from: [2019,2,14], to: [2019,2,27] }
])`

Thank you for all

[DanielRuf]

var picker = $input.pickadate('picker')

This is probably not one instance but returns two.

Generally it should work with my code. You may want to start with my small reproducible example and extend it step for step until you get your desired setup. Start with one single and simple pickadate instance.

[davidpazo]

Okei, i go probe, thank you so much.

[DanielRuf]

Hi @davidpazo,

could you solve it?