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. We're getting input and setting output in %d.%m.%Y format

// inputOutputFormatting preparation
{
    inputField = document.getElement(".arvDate");
     inputClone = inputField.clone();
    
    {
        locale = MooTools.lang.getCurrentLanguage();
        
        defParser = MooTools.lang.get('Date').dateOrder;
        newParser = ['date', 'month', 'year'];
    
        MooTools.lang.set(locale, 'Date', { dateOrder: newParser});
    
        inputDate = Date.parse(inputField.value); // PROBLEM HERE: parse doesn't allow custom formatting, thus using the MooTools.lang
        inputClone.set('value', inputDate.format("%d%o %b/ %Y"));
    
        MooTools.lang.set(locale, 'Date', { dateOrder: defParser});
    }
    
    inputField.setStyle('display', "none");
     inputClone.inject(inputField,'after');
     inputClone.set('name', "");
}
                  

// DatePicker init
var dpInstance = new DatePicker(inputClone, {
    toggleElements: '.date_toggler',
    pickerClass: 'datepicker_vista',
    format: "%d%o %b/ %Y",
//  inputOutputFormat: "%d.%m.%Y",
    allowEmpty: false,
      
    onSelect: function(date){ 
        inputField.set('value', date.format('%d.%m.%Y'));
        alert ("input: " + inputField.value + "\nformat: " + inputClone.value);
    }
});