How to dynamically disable dynamic dates in datepicker

Question

I am trying to disable erratic dates dynamically, how can I do this?

if I give a static value, for example, 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 it?

My script

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
    });

});

What is wrong in my code. Does anyone help me?

Answer 1

Try the working demo

Just change the date format e.g. 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, as mentioned in my comment, updated the code below.

Updated script - Working script

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
    });

});