triggering a function before $("").datepicker()

I have a listeJNO variable that I need in beforeShowDay function

$('#calendrier').datepicker({

                format: "dd/mm/yyyy",
                weekStart: 1,
                maxViewMode: 3,
                language: "fr",
                calendarWeeks: true,
                beforeShowDay: function (date) {

                    for (var i = 0; i < listeJNO.length; i++) {
                        console.log(date >= listeJNO[i].Begin && date <= listeJNO[i].End);
                        if (date >= listeJNO[i].Begin && date <= listeJNO[i].End) {

                            return {

                                classes: 'morning-ferie'
                            };
                        }
                    }
                }

but before, I need to define the listeJNO. I have a function which is doing this actually its getListeJNO(). So here’s my problem, wherever I put the getListeJNO() to initialize data in listeJNO, the beforeShowDay option inside the $('calendrier').datepicker({...}) always goes first where listeJNO has no data inside

17 thoughts on “triggering a function before $("").datepicker()”

  1. Did you try and set the variable inside your beforeShowDay? I would think that would work. Have your listeJNO var declared outside the beforeShowDay function, and then set it inside that function. Something like this:

     beforeShowDay: function (date) {
                   //Set your variable in this function
                   listeJNO = getListeJNO();
                    for (var i = 0; i < listeJNO.length; i++) {
                        console.log(date >= listeJNO[i].Begin && date <= listeJNO[i].End);
                        if (date >= listeJNO[i].Begin && date <= listeJNO[i].End) {
    
                            return {
    
                                classes: 'morning-ferie'
                            };
                        }
                    }
                }
    
    Reply
  2. An option would be to initialize the datepicker when the load of listeJNO is completed.
    You could do this by returning a promise and set the datepicker in the "then" callback.

    First create the promise which loads the data into the listeJNO

    var listeJNO;
    var loadListeJNOpromise = new Promise(
        function (resolve, reject) {
                //load the data into listeJNO, then send it in the resolve callback
                listeJNO = ....;
                
                resolve('Load completed'); // fulfilled
                
                //if something went wrong then reject it
                //reject('Didnt work..'); 
            }
        );
    

    Then consume the promise as this

    //create a function thats sets the datepicker
    var initializeDatepicker = function(){
        $('#calendrier').datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            maxViewMode: 3,
            language: "fr",
            calendarWeeks: true,
            beforeShowDay: function (date) {
    
                for (var i = 0; i < listeJNO.length; i++) {
                    console.log(date >= listeJNO[i].Begin && date <= listeJNO[i].End);
                    if (date >= listeJNO[i].Begin && date <= listeJNO[i].End) {
    
                        return {
    
                            classes: 'morning-ferie'
                        };
                    }
                }
            }
    };
    
    //declare a function which invokes the datepicker function in the promise 
    var initialize = function () {
        loadListeJNOpromise
            .then(function (fulfilled) {
                console.log(fulfilled);
                //call the datepicker initialize here
                initializeDatepicker();
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    //invoke the initilize
    initialize(); 
    
    Reply

Leave a Comment