JSFiddle - React, Tailwind, and code Playground

by paul724

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>SSF Calendar</title>
<link rel="stylesheet" href="ssf.css" type="text/css">
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.source for datepick js/jquery.datepick.js"></script>
<script type="text/javascript" src="http://www.source for datepick extension/jquery.datepick.ext.js"></script>


<script type="text/javascript">
$(function() { // Shorthand for $(document).ready(function() {

//placed here the datepicker and dialog do not show at all
    $('#dialog').dialog({autoOpen: false});
    
    $('#hoverPicker').datepick({ 
        onShow: $.datepick.hoverCallback(showDialog),
        dateFormat: 'D dd-mm-yyyy',
        showTrigger: '#calImg'
    //the next line(s) will 'freeze' the dialog when a date is clicked
        //onSelect: function(dates) { alert('The chosen date(s): ' + dates); },
        //onSelect: showdialog2,
        });
    
//placed here the datepicker shows but does not initialise dialog
    // $('#dialog').dialog({autoOpen: false});
    
    function showDialog(date, selectable) {
        $('#dialog').attr('title', "test title");
            // put the date in the dialog box 
        $("#dialog").html("I am currently not in a dialog  " + (selectable ? $.datepick.formatDate('D dd-M-yyyy', date) : '') || 'nothing');
            // show the dialog box
        $('#dialog').dialog('open'); 
        };
    
     function showDialog2(date, selectable) {
    //use an alert to show the date is availableo nClick 
           ...

CSS

/* Default styling for jQuery Datepicker v4.0.6. */
.datepick {
    background-color: #fff;
    color: #000;
    border: 1px solid #444;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-family: Arial,Helvetica,Sans-serif;
    font-size: 90%;
}
.datepick-rtl {
    direction: rtl;
}
.datepick-popup {
    z-index: 1000;
}
.datepick-disable {
    position: absolute;
    z-index: 100;
    background-color: white;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.datepick a {
    color: #fff;
    text-decoration: none;
}
.datepick a.datepick-disabled {
    color: #888;
    cursor: auto;
}
.datepick button {
    margin: 0.25em;
    padding: 0.125em 0em;
    background-color: #fcc;
    border: none;
    border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    font-weight: bold;
}
.datepick-nav, .datepick-ctrl {
    float: left;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-size: 90%;
    font-weight: bold;
}
.datepick-ctrl {
    background-color: #600;
}
.datepick-cmd {
    width: 30%;
}
.datepick-cmd:hover {
    background-color: #777;
}
.datepick-ctrl .datepick-cmd:hover {
    background-color: #f08080;
}
.datepick-cmd-prevJump, .datepick-cmd-nextJump {
    width: 8%;
}
a.datepick-cmd {
    height: 1.5em;
}
button.datepick-cmd {
    text-align: center;
}
.datepick-cmd-prev, .datepick-cmd-prevJump, .datepick-cmd-clear {
    float: left;
    padding-left: 2%;
}
.datepick-cmd-current, .datepick-cmd-today {
    float: left;
    width: 35%;
    text-align: center;
}
.datepick-cmd-next, .datepick-cmd-nextJump, .datepick-cmd-close {
    float: right;
    padding-right: 2%;
    text-align: right;
}
.datepick-rtl .datepick-cmd-prev, .datepick-rtl .datepick-cmd-prevJump,
.datepick-rtl .datepick-cmd-clear {
    float: right;
    padding-left: 0%;
    padding-right: 2%;
    text-align: right;
}
.datepick-rtl .datepick-cmd-current, .datepick-rtl .datepick-cmd-today...