JSFiddle - React, Tailwind, and code Playground
HTML
<h1>UTC Test</h1>
<p id="browser"></p>
<table id="table">
<thead>
<tr>
<th id="desc">Description</th>
<th id="source">Source</th>
<th id="output">Formatted</th>
</tr>
</thead>
<tbody id="list"></tbody>
</table>
<script>
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1) return data[i].identity;
} else if (dataProp) return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
}, {
string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
}, {
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
}, {
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
}, {
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
}, {
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
...
CSS
body {
font-size: 12px;
}
th {
font-weight: 800;
}
#desc {
width: 80px;
}
#source {
width: 130px;
}
JavaScript
$('#browser').text('Browser: ' + BrowserDetect.browser);
var data = [{
desc: 'UTC with Z',
utc: '2011-09-10T12:30:00Z'
}, {
desc: 'UTC no Z',
utc: '2011-09-10T12:30:00'
}];
data.forEach(function (row) {
var tr = $('<tr/>');
tr.append($('<td/>').text(row.desc));
tr.append($('<td/>').text(row.utc));
var output = new Date(row.utc);
tr.append($('<td/>').text(output));
$('#list').append(tr);
});