JSFiddle - React, Tailwind, and code Playground

by william

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/cupertino/jquery-ui.css">
<input type="input" id="datepicker"/>

CSS

#highlight, .highlight {
    /*background-color: #000000;*/
}
/*
.highlight > a.ui-state-default {
    background: url("images/ui-bg_highlight-soft_25_ffef8f_1x100.png") repeat-x scroll 50% top #FFEF8F !important;
    border: 1px solid #F9DD34;
    color: #363636;
}*/

JavaScript

var dates = [new Date(2011, 9 - 1, 19), 
             new Date(2011, 9 - 1, 20), 
             new Date(2011, 9 - 1, 21), 
             new Date(2011, 10 - 1, 31)];

$(function() {

    $('#datepicker').datepicker({
        numberOfMonths: [1, 1],
        beforeShowDay: highlightDays
    }).click(function() {
        $('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');
        $('.highlight a', $(this).next()).addClass('ui-state-highlight');
    });


    $('#datepicker').click(function() {
        // put your selected date into the data object
        var data = $('#datepicker').val();
/*
        $.get('getdata.php?date=' + data, function(data) {
            $('#events').html(data).show('slow');
        });*/
    });

    function highlightDays(date) {
        for (var i = 0; i < dates.length; i++) {
            if (dates[i].getTime() == date.getTime()) {
                return [true, 'highlight'];
            }
        }
        return [true, ''];
    }
});