JSFiddle - React, Tailwind, and code Playground

by knalli

HTML

<link rel="stylesheet" href="http://docs.sencha.com/ext-js/4-1/extjs-build/resources/css/ext-all.css">
<table>
    <thead>
    <tr>
        <th>Timestamp</th>
        <th>new Date(value)</th>
            <th>Ext.Date.parse(value, "c")</th>
        <th>Ext.data.Types.DATE
                .convert.call({dateFormat:"c"}, 
            value)</th>
        <th>DateFormat1</th>
        </tr>
    </thead>
    <tbody>
        <tr id="id1" data-datetime="2012-10-18T16:17:23.123+0200"><th></th><td></td><td></td><td></td><td></td></tr>
        <tr id="id2" data-datetime="2012-10-18T16:17:23.123-1000"><th></th><td></td><td></td><td></td><td></td></tr>
        <tr id="id3" data-datetime="2012-10-18T16:17:51.299+0000"><th></th><td></td><td></td><td></td><td></td></tr>
    </tbody>
</table>

CSS

table {
    font-size: 10px;
    font-family: Courier;
}
table thead th {
    background-color: #444444;
    color: #aaaaaa
}
table td, table th{
    border: 1px solid #555555;
}

JavaScript

Ext.onReady(function(){
    var trs = Ext.getBody().query('table tbody tr');
    for (var i in trs) {
        var tr = trs[i];
        var dt = tr.getAttribute('data-datetime');
        var th = Ext.get(tr).query('th')[0];
        var tds = Ext.get(tr).query('td');
        var td1 = tds[0];
        var td2 = tds[1];
        var td3 = tds[2];
        var td4 = tds[3];
        th.innerHTML = dt;
        try {
            td1.innerHTML = new Date(dt).toString();
        } catch (e) {
            td1.innerHTML = "Error!";
        }
        try {
            td2.innerHTML = Ext.Date.parse(dt, "c");
        } catch (e) {
            td2.innerHTML = "Error!";
        }
        try {
            td3.innerHTML = Ext.data.Types.DATE.convert.call({dateFormat:"c"}, dt);
        } catch (e) {
            td3.innerHTML = "Error!";
        }
        try {
            var date = Ext.data.Types.DATE.convert.call({dateFormat:"c"}, dt);
            td4.innerHTML = Ext.Date.format(date, 'd.m.Y H:i:s');
        } catch (e) {
            td4.innerHTML = "Error!";
        }
    }
});