JQuery DatePicker and beforeShowDay

According to jQueryUI's Datepicker API,

This explains why

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

does not work.

Also I noticed you are calling .datepicker() multiple times and each time you are giving it different parameters.

Instead of:

$("#dateRetrait").datepicker();

$("#dateRetrait").datepicker({beforeShowDay: function(d) {
        console.log("bsd");
        alert("bsd");
    }});

$('#dateRetrait').datepicker('option', 'minDate', new Date());

$("#dateRetrait").datepicker("option","dateFormat", 'dd-mm-yy');

Try doing this:

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    beforeShowDay: function(d) {
        var dmy = (d.getMonth()+1); 
        if(d.getMonth()<9) 
            dmy="0"+dmy; 
        dmy+= "-"; 

        if(d.getDate()<10) dmy+="0"; 
            dmy+=d.getDate() + "-" + d.getFullYear(); 

        console.log(dmy+' : '+($.inArray(dmy, availableDates)));

        if ($.inArray(dmy, availableDates) != -1) {
            return [true, "","Available"]; 
        } else{
             return [false,"","unAvailable"]; 
        }
    }
    });

I have also provided you with a demo: http://jsfiddle.net/yTMwu/18/ . Hope this helps!

The date being passed into the callback function is a full-fledged date-and-time. So if you want it to be compared against a short date string, one of them must be converted. This snippet of just the beforeShowDay attribute portion of the datepicker demonstrates that a conversion is necessary. Here I simply disable a single date on the calendar to prove the point.

                beforeShowDay: function(date) {
                var dd = date.getDate();
                var mm = date.getMonth()+1; //January is 0!
                var yyyy = date.getFullYear();
                var shortDate = mm+'/'+dd+'/'+yyyy;
                var test = "12/30/2014";
                if (shortDate == test) {
                    return [false, "" ];
                } else {
                    return [true, "" ];
                }
            }

Dom gave good explain. And I would like to add more shorten code:

If you have array of availableDates in format: 0000-00-00 (yyyy-mm-dd)

var availableDates = ["2020-01-05", "2020-01-10", "2020-01-14"];

$("#dateRetrait").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: new Date(), 
    beforeShowDay: function(d) {        
        var year = d.getFullYear(),
            month = ("0" + (d.getMonth() + 1)).slice(-2),
            day = ("0" + (d.getDate())).slice(-2);

        var formatted = year + '-' + month + '-' + day;

        if ($.inArray(formatted, availableDates) != -1) {
            return [true, "","Available"]; 
        } else{
            return [false,"","unAvailable"]; 
        }
    }
});

beforeShowDay - works each time, before render day))

$.inArray - find value in array (-1 if no value)

In this solution, you can make stopDates, just change line:

if ($.inArray(formatted, availableDates) != -1) {

to

if ($.inArray(formatted, availableDates) == -1) {