JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
<input id="datepicker" type="text">
<ul id="dates"></ul>

CSS

#datepicker {
    width: 100px;
    float: left;
}

#dates {
    width: 200px;
    height: 200px;
    overflow: auto;
    background-color: yellow;
    float:left; 
}

#dates li {
    padding-left: 5px;
    line-height: 150%;
    font-family: sans-serif;
    cursor: pointer;
}
body {
    font-size: 13px;
}

.highlight { 
    background-color: red;
}

JavaScript

var disabledDates = [
    "2012-10-01",
    "2012-10-02",
    "2012-10-30",
    "2012-09-12"
];

$("#datepicker").datepicker({
    beforeShowDay: dateEnabled,
    onSelect: dateSelected
});
        

function dateEnabled( d ) {
    if( disabledDates.indexOf( getDate( d ) ) > -1 ) {
        return [false];
    } else {
        return [true] ;
    }
}     

function getDate( d ) {
    var day,
        month,
        year;
    
    day = d.getDate( );
    month = d.getMonth( ) + 1;
    year = d.getFullYear( );
    
    if( month < 10 ) month = "0" + month;
    if( day < 10 ) day = "0" + day;
    return year + "-" + month + "-" + day;
}

function dateSelected( d ) { 
    $("#dates").append( "<li>" + d + "</li>" );
    $("#datePicker").datepicker( "setDate", "" ).blur();                                               
}
$("#dates ").on( "click", "li", function( ) {
    $(this).toggleClass("highlight");
});