how to disable unavilable dates dynamically in datepicker

Question

I'm trying to disable unaviable dates dynamically how can i do this ?

if i give static value like below its working fine

var unavailableDates = ["10-8-2015","24-7-2015","10-7-2015","09-8-2015","09-7-2015","01-12-2015","01-1-2016","11-8-2015"];  

if i get this value dynamically its not working how can i solve this ?

My Fiddle

var unavailableDates = $('#DesignIdUnavialble').html();

function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(function() {
    $("#iDate").datepicker({
        defaultDate: new Date("7-7-2015"),
        minDate:0,
        dateFormat: 'dd-mm-yy',
        beforeShowDay: unavailable
    });

});

Whats wrong in my code.Anybody help me ?

Answer 1

Try this Working Demo

Just change the date format like m/d/Y

$(document).ready(function(){
var Desingndate = $('#DesignIdUnavialble').html();
var splitdate = Desingndate.split(',');
   // console.log(splitdate.length);
    var arrDisabledDates = {};
    for (var i = 0; i < splitdate.length; i++) {
        //console.log(splitdate[i]);    
    arrDisabledDates[new Date(splitdate[i])] = new Date(splitdate[i]);    
    }

     $("#iDate").datepicker({       
        dateFormat: 'dd-mm-yy',
        beforeShowDay: function (dt) {
            var bDisable = arrDisabledDates[dt];
            if (bDisable) return [false, '', ''];
            else return [true, '', ''];
        }
    });

});

Answer 2

Here you go , as mentioned in my comment, updated code below.

Updated fiddle - Working Fiddle

var unavailableDates =$('#DesignIdUnavialble').html().replace(/\"/g,'').split(",");
console.log(unavailableDates);
function unavailable(date) {
    dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
    if ($.inArray(dmy, unavailableDates) == -1) {
        return [true, ""];
    } else {
        return [false, "", "Unavailable"];
    }
}

$(function() {
    $("#iDate").datepicker({
        defaultDate: new Date("3-3-2015"),
        dateFormat: 'dd MM yy',
        beforeShowDay: unavailable
    });

});