datepicker - beforeShowDay not working

I'm trying to use beforeShowDay to block days from the calendar. I found this Fiddle code that works. But I can`t figure out why my code doesn't work for me. I get no error-messages. I can see the dates in console which are not -1, the problem is that the calendar doesn't block the dates that are unavailable (the dates that return -1). The user can pick whatever date they want.

This is my html :

<div> <input type="text" name="date" /> <span><span></span></span>
</div>

and this is my JQuery :

 availableDates = ['04-25-2015','04-27-2015','04-22-2015']; $('#date').datepicker({ dateFormat: 'mm-dd-yy', startDate: "04-20-2015", endDate: "01-01-2016", 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"]; } }, todayBtn: "linked", autoclose: true, todayHighlight: true });

1 Answer

I created a fiddle combining your code and from the link you provided and I think its working. I just used his initialize method and called the datepicker inside that. Check THIS DEMO

EDIT - For the version you mentioned you need to add external resource for datepicker [jquery-ui.css and jquery-ui.js].

Check this Updated FIDDLE