How can i pass the date to my addEventListener function?

Question

I want to pass selectedDate generated from the Datepicker to the valider_planning.addEventListener('click', function(){})

In the datePicker, selectedDate is generated by default with the current date, or it changes if the user select a particular date.

I tried to do it by passing by a global variable, however it seems it does not work for the selectedDate generated by onSelect: function(selectedDate)

This is meant to do : when the user presses the valider_planning button, i can send information via Ajax to my php file in order to validate the planning.

Here is my code :

let current_date;
var date_choisie;
var selectedDate;
const user = $("#user").val();
const boutique = $("#boutique").val();

// Datepicker on navBar
$( function() {
    $("#calendrier").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate) {
            console.log("Date apres choix : " + selectedDate + "type : " + typeof(selectedDate) + "Employé : " + user + "Boutique : " + boutique);
            AjaxCall(selectedDate, boutique);
        }
    })
    //set date as current (by default)
    $("#calendrier").datepicker('setDate', new Date());

    //get date in a variable
    date_choisie = $('#calendrier').datepicker('getDate');
    selectedDate = $.datepicker.formatDate("yy-mm-dd", date_choisie);

    console.log("date par défaut : "+ selectedDate + "type : " + typeof(selectedDate) +"Employé : " + user + "Boutique : " + boutique);
    AjaxCall(selectedDate, boutique);
} );

valider_planning.addEventListener('click', function(){
    $.ajax({
        method: 'get',
        url: 'http://planning-ilm.atwebpages.com/valider_planning/' + selectedDate + '/' + boutique,
        dataType: 'json',
        success: function(data){
            showplannings(data.datecourante, data.message, affectation);
            plannings2 = data.message;
            datecourante2 = data.datecourante;
        }
    });
    $("#validation_modal")[0].style.visibility = "visible";
    $("#validation_modal")[0].style.display = "block";

})

Answer 1

I think i solved it :

I bassically changed selectedDate to selectedDate2 and added selectedDate = selectedDate2

var selectedDate;

$( function() {
    $("#calendrier").datepicker({
        dateFormat: "yy-mm-dd",
        onSelect: function(selectedDate2) {
            console.log("Date apres choix : " + selectedDate2 + "type : " + typeof(selectedDate2) + "Employé : " + user + "Boutique : " + boutique);
            AjaxCall(selectedDate2, boutique);
            selectedDate = selectedDate2;
        }
    })
    //set date as current
    $("#calendrier").datepicker('setDate', new Date());

    //get date in a variable
    date_choisie = $('#calendrier').datepicker('getDate');
    selectedDate = $.datepicker.formatDate("yy-mm-dd", date_choisie);

    console.log("date par défaut : "+ selectedDate + "type : " + typeof(selectedDate) +"Employé : " + user + "Boutique : " + boutique);
    AjaxCall(selectedDate, boutique);
} );