JSFiddle - React, Tailwind, and code Playground
HTML
<div><a href="#">dddd h:mmtt d MMM yyyy</a></div>
<div><a href="#">M/d/y</a></div>
<div><a href="#">HH:mm:ss</a></div>
<div><a href="#">hh:mm:ss TT</a></div>
<div><a href="#">yy/M/d</a></div>
<div><a href="#">ddd MMM d \a\t h:mm TT</a></div>
<input value="dddd h:mmtt d MMM yyyy" />
<div id="formattedDate"></div>
CSS
body { font-family: sans-serif; }
input { width: 400px; }
#formattedDate { font-size: 2em; margin: 16px 8px; }
JavaScript
onload = function(){
var outputDiv = document.getElementById("formattedDate");
var input = document.querySelector("input");
setFormatFromInput();
input.onkeyup = setFormatFromInput;
[].forEach.call(document.querySelectorAll("a"), function(link){
link.onclick = setFormatFromLink;
});
function setFormatFromLink(e) {
e.preventDefault();
input.value = this.innerHTML;
setFormatFromInput()
}
function setFormatFromInput() {
outputDiv.innerHTML = new Date().format(input.value);
}
};
Date.prototype.format = function (format, utc){
return formatDate(this, format, utc);
};
function formatDate(date, format, utc){
var MMMM = ["\x00", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var MMM = ["\x01", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dddd = ["\x02", "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
var ddd = ["\x03", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
function ii(i, len) { var s = i + ""; len = len || 2; while (s.length < len) s = "0" + s; return s; }
var y = utc ? date.getUTCFullYear() : date.getFullYear();
format = format.replace(/(^|[^\\])yyyy+/g, "$1" + y);
format = format.replace(/(^|[^\\])yy/g, "$1" + y.toString().substr(2, 2));
format = format.replace(/(^|[^\\])y/g, "$1" + y);
var M = (utc ? date.getUTCMonth() : date.getMonth()) + 1;
format = format.replace(/(^|[^\\])MMMM+/g, "$1" + MMMM[0]);
format = format.replace(/(^|[^\\])MMM/g, "$1" + MMM[0]);
format = format.replace(/(^|[^\\])MM/g, "$1" + ii(M));
format = format.replace(/(^|[^\\])M/g, "$1" + M);
var d = utc ? date.getUTCDate() : date.getDate();
format = format.replace(/(^|[^\\])dddd+/g, "$1" + dddd[0]);
format =...