JSFiddle - React, Tailwind, and code Playground

by piotr_cz

HTML

<script src="https://github.com/arian/mootools-datepicker/raw/1.51/Source/datepicker.js"></script>
<link rel="stylesheet" href="https://github.com/arian/mootools-datepicker/raw/1.51/Source/datepicker.css">
<input name="date" value="10.01.2011" class="arvDate inputbox long validate-date required" type="text" size="10" readonlyx="readonly" /><span class="date_toggler">cal</span>

CSS

.datepicker_vista {
    position: absolute;
    font-size: 10px;
    font-family: Tahoma, sans-serif;
    color: #000;
    line-height: normal;
    width: 172px;
    height: 135px;
    padding: 14px;
    background: url(frame.png) no-repeat;
}

/* header
********************************************************/
.datepicker_vista .header {
    position: relative;
    height: 15px;
    margin-bottom: 5px;
    padding-top: 1px;
}

.datepicker_vista .header .title {
    text-align: center;
    margin: 0 18px 0 18px;
}

.datepicker_vista .header .titleText {
}

.datepicker_vista .header .previous,
.datepicker_vista .header .next,
.datepicker_vista .header .closeButton {
    position: absolute;
    cursor: pointer;
    text-indent: -40px;
    overflow: hidden;
    width: 12px;
    height: 12px;
    top: 2px;
    background-image: url(buttons.png);
    background-position: left top;
    background-repeat: no-repeat;
}

.datepicker_vista .header .previous {
    left: 4px;
}
.datepicker_vista .header .previous:hover {
    background-position: left bottom;
}
.datepicker_vista .header .next {
    right: 4px;
    background-position: -13px top;
}
.datepicker_vista .header .next:hover {
    background-position: -13px bottom;
}
.datepicker_vista .header .closeButton {
    display: none;
    right: 0px;
    top: 0px;
    background-position: right top;
}
.datepicker_vista .header .closeButton:hover {
    background-position: right bottom;
}

/* body
********************************************************/
.datepicker_vista .body {
    position: relative;
    top: 0px;
    left: 2px;
    width: 168px;
    height: 112px;
    overflow: hidden;
}

/* time
********************************************************/
.datepicker_vista .time {
    position: relative;
    width: 100%;
    height: 100%;
}

.datepicker_vista .time .hour,
.datepicker_vista .time .separator,
.datepicker_vista .time .minutes {
    border: 1px solid #ccc;
    background: #fff;
    width: 50px;
    font-size:...

JavaScript

MooTools.lang.setLanguage("en-US"); // let's assume default browser locale is en-US

var dpInstance = new DatePicker(document.getElement('.arvDate'), {
    toggleElements: '.date_toggler',
    pickerClass: 'datepicker_vista',
    format: "%d.%m.%Y",
//  inputOutputFormat: "%d.%m.%Y",
    allowEmpty: false
});