JSFiddle - React, Tailwind, and code Playground

by Amitabha Ghosh

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

<div class="div-date-retrait"> 
    <input type="text" id="dateRetrait" name="dateRetrait"/> 
</div>

JavaScript

$(document).ready(function(){
/*initialisation des composants*/
initComponent();
});


availableDates = ['01-24-2013','01-25-2013'];

/* Fonction d'initialisation des composants */
function initComponent(){

/* Date retrait */
$("#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"]; 
        }
    }
    });

//$("#dateRetrait").datepicker({buttonImage: "../../../Images/boutons/btn_calendier.png"});
//$("#dateRetrait").datepicker({showButtonPanel: true });
//$("#dateRetrait").datepicker({beforeShow: function() {setTimeout(function() {$(".ui-datepicker").css("z-index", 9999999999);}, 10);}});

}