JSFiddle - React, Tailwind, and code Playground

by IagoSRL

HTML

<script src="http://arshaw.com/xdate/downloads/0.6/xdate.js"></script>
<section class="without">
<h1>Without valueOf</h1>
<div id="a-jsdate"></div>
<div id="a-xdate"></div>
<div id="a-jsdatecalc"></div>
<div id="a-xdatecalc"></div>
<div id="a-jsdatevalue"></div>
<div id="a-xdatevalue"></div>
</section><section class="with">
<h1>With valueOf</h1>
<div id="b-jsdate"></div>
<div id="b-xdate"></div>
<div id="b-jsdatecalc"></div>
<div id="b-xdatecalc"></div>
<div id="b-jsdatevalue"></div>
<div id="b-xdatevalue"></div>
</section>

CSS

.without{
    color: green;
}
.with{
    color: red;
}

JavaScript

/* Elements */
var ajsdate = document.getElementById('a-jsdate');
var bjsdate = document.getElementById('b-jsdate');
var axdate = document.getElementById('a-xdate');
var bxdate = document.getElementById('b-xdate');
var ajsdatecalc = document.getElementById('a-jsdatecalc');
var bjsdatecalc = document.getElementById('b-jsdatecalc');
var axdatecalc = document.getElementById('a-xdatecalc');
var bxdatecalc = document.getElementById('b-xdatecalc');
var ajsdatevalue = document.getElementById('a-jsdatevalue');
var bjsdatevalue = document.getElementById('b-jsdatevalue');
var axdatevalue = document.getElementById('a-xdatevalue');
var bxdatevalue = document.getElementById('b-xdatevalue');

/* Dates */
var jsdate = new Date();
var xdate = new XDate(jsdate);

/* NOTE: brackets are used to test string concatenation */

/* Without */
ajsdate.innerHTML = "[" + jsdate + "]";
axdate.innerHTML = "[" + xdate + "]";
ajsdatecalc.innerHTML = "[" + (jsdate + jsdate) + "]";
axdatecalc.innerHTML = "[" + (xdate + xdate) + "]";
ajsdatevalue.innerHTML = jsdate.valueOf();
axdatevalue.innerHTML = xdate.valueOf();

/* Adding valueof to XDate prototype */
function addValueOfToXDate() {
    XDate.prototype.valueOf = function(){
        return this.toString();
    };
};
addValueOfToXDate();

/* With */
bjsdate.innerHTML = "[" + jsdate + "]";
bxdate.innerHTML = "[" + xdate + "]";
bjsdatecalc.innerHTML = "[" + (jsdate + jsdate) + "]";
bxdatecalc.innerHTML = "[" + (xdate + xdate) + "]";
bjsdatevalue.innerHTML = jsdate.valueOf();
bxdatevalue.innerHTML = xdate.valueOf();