JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">
<p>Note: Click the button before using the calendar</p>
<input type="text" id="datepicker">
<input type="button" id="button" value="Get Movie Dates">

CSS

body
{
    font-size: 11px;
}

JavaScript

var datelist = [];
$(document).ready(function() {
    $("#datepicker").datepicker({
        beforeShowDay: function(d) {
            // normalize the date for searching in array
            var dmy = "";
            dmy += ("00" + d.getDate()).slice(-2) + "-";
            dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "-";
            dmy += d.getFullYear();
            if ($.inArray(dmy, datelist) >= 0) {
                return [true, ""];
            }
            else {
                return [false, ""];
            }
        }
    });
    $("#button").click(function() {
        datelist = []; // empty the array
        $.post("/echo/html/", {
            // parameters here
        }, function() {
            var result = "28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012,28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012"; // dummy result
            datelist = result.split(","); // populate the array
            $("#datepicker").datepicker("refresh"); // tell datepicker that it needs to draw itself again
        });
    });
});