JSFiddle - React, Tailwind, and code Playground
by eirc
HTML
<textarea id="output"></textarea>
JavaScript
// stringFormat directive inspired by http://apidock.com/ruby/DateTime/strftime
Date.prototype.format = function (stringFormat, options) {
options = options || {};
options.days = options.days || ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
options.daysShort = options.daysShort || ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
options.months = options.months || ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return stringFormat.
replace(/%([_\^\-]?\w)/g, '{{$1}}').
format({
// Year
Y: this.getFullYear(),
// Month
m: (this.getMonth() + 1).pad(2),
B: options.months[this.getMonth()],
// Day
d: this.getDate().pad(2),
e: this.getDate(),
// Hour
H: this.getHours().pad(2),
// Minute
M: this.getMinutes().pad(2),
// Second
S: this.getSeconds().pad(2),
// Millisecond
L: (this.getMilliseconds() / 1000).toFixed(3).slice(2, 5),
// Timezone
z: (this.getTimezoneOffset() > 0 ? "-" : "+") + (Math.floor(Math.abs(this.getTimezoneOffset()) / 60)).pad(2) +
':' + (Math.floor(Math.abs(this.getTimezoneOffset()) % 60)).pad(2),
// Weekday
A: options.days[this.getDay()],
a: options.daysShort[this.getDay()]
});
};
String.prototype.format = function () {
var formatArgumentPattern, result = this;
if (arguments.length === 1 && typeof arguments[0] === 'object' && this.indexOf('{{') > -1) {
for (var key in arguments[0]) {
if (!arguments[0].hasOwnProperty(key)) continue;
var value = arguments[0][key];
formatArgumentPattern = new RegExp('{{' + key + '}}', 'g');
result = result.replace(formatArgumentPattern, value);
}
} else {
var args = Array.prototype.slice.call(arguments, 0);
...