JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div name="date"></div>

CSS

.dpTable {
    width: 100vh;
    height: 280px;
    font-family: Verdana;
    font-size: 9px;
    text-align: center;
    color: #fff !important;
    background-color: #333;
    border: 1px solid #666;
}
.dpTD {
    border: 1px solid #555;
}
.dpDayHighlightTD {
    background-color: #42b449;
    border: 2px solid #999;
}
.dpTDHover {
    background: #555;
    border: 2px solid #42b449;
    cursor: pointer;
}
.dpDayTD {
    color: #fff;
    font-size: 12px;
    background-color: #42b449;
}
.dpTitleTD {
    text-align: center;
}
.dpTitleText {
    font-size: 14px;
    color: #ddd;
    font-weight: bold;
}
.dpDayHighlight {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}
.dpButton, .dpTodayButton {
    font-family: Verdana;
    font-size: 15px;
    color: #fff;
    background: #42b449;
    font-weight: bold;
    padding: 0px;
    border:0px;
}

JavaScript

var datePickerDivID = "datepicker";
var iFrameDivID = "datepickeriframe";

var dayArrayShort = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayMed = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat');
var dayArrayLong = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var monthArrayShort = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec');
var monthArrayMed = new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec');
var monthArrayLong = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

var defaultDateSeparator = "-";        // common values would be "/" or "."
var defaultDateFormat = "ymd"    // valid values are "mdy", "dmy", and "ymd"
var dateSeparator = defaultDateSeparator;
var dateFormat = defaultDateFormat;


function CopyText(SourceFeild, DestinationFeild) {
    document.getElementsByName(DestinationFeild).item(0).value = document.getElementsByName(SourceFeild).item(0).value;
}

function displayDatePicker(dateFieldName, displayBelowThisObject, dtFormat, dtSep)
{
    var targetDateField = document.getElementsByName(dateFieldName).item(0);

    // if we weren't told what node to display the datepicker beneath, just display it
    // beneath the date field we're updating
    if (!displayBelowThisObject)
        displayBelowThisObject = targetDateField;

    // if a date separator character was given, update the dateSeparator variable
    if (dtSep)
        dateSeparator = dtSep;
    else
        dateSeparator = defaultDateSeparator;

    // if a date format was given, update the dateFormat variable
    if (dtFormat)
        dateFormat = dtFormat;
    else
        dateFormat = defaultDateFormat;

    var x = displayBelowThisObject.offsetLeft;
    var y = displayBelowThisObject.offsetTop +...