SO - 15400775

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<input id="myDate" />
<div id="id1"></div>

CSS

.div1 {
    width:30%;
    float: left;
    clear:none;
     
}

JavaScript

var arr = ["2015-10-15", "2015-10-03", "2015-09-18", "2015-11-11", "2015-11-12", "2015-11-13", "2015-12-19", "2015-12-25"]
var array = [];

function createOfferDates(arr) {

    // Split  the array and store values into array 

    var mydiv = "";

    for (i = 0; i < arr.length; i++) {
        //          create array for the consumption 
        array[i] = arr[i];
        mydiv += "<div class='white-bg pull-left' id=" arr[i] ">" + arr[i]  + "</div>"



    }


    $("#id1").html(mydiv);


    $('input').datepicker({
        dateFormat: "yy-mm-dd",

        beforeShowDay: function (date) {

            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);

            return [$.inArray(string, array) > -1];
        },

        onSelect: function (argument) {
            //alert($("#myDate").val());
            // Use CSS class and Remove it from earlier div 
            $("#id1 div ").css("background", "white");
            // Apply it to selected date block. 
            $("#id1 div:contains('" + $("#myDate").val() + "')").css("background", "red");
        }
    });

}

createOfferDates(arr);