JSFiddle - React, Tailwind, and code Playground

by jimcute

HTML

<div>
  <p>
    <b>Format examples:</b> <br><br>
    <span>dddd, MMMM yyyy</span><br><br>
    <span>MMMM, d yyyy</span><br><br>
    <span>MMMM, dddd yyyy</span><br><br>
    <span>MMMM dddd yyyy</span><br><br>
    <span>d MMMM yyyy</span><br><br>
  </p>
  <p>
    Enter your format
  </p>
  <input id="format" type="text" placeholder="Enter format" value="dddd, MMMM yyyy" /> <br>
  <br>
  <button onclick="getLongDateClick()">
    Get Long Date
  </button><br><br>
  <b>Long Date Result:: </b><br><br>
  <b id="date"></b>
</div>

CSS

span {
  margin-top: 5px;
  margin-bottom:10px;
}

JavaScript

const MONTHS = [
	'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
];
const DAYS = [
	'Sunday',
  'Monday',
  'Tuesday',
  'Wednesday',
  'Thursday',
  'Friday',
  'Saturday'
]

function getLongDate(date, format) {
  let parsedDate = new Date(date);
  let month = MONTHS[parsedDate.getMonth() + 1];
	let day = '';
  
  if(format.indexOf('dddd') > -1) {
  	day = DAYS[parsedDate.getDay()];
  } else {
  	day = parsedDate.getDate();
  }
  
  const dCount = format.split('d').length - 1;
  
  if(format.indexOf('MMMM') < 0 || format.indexOf('yyyy') < 0 || (dCount != 1 && dCount != 4)) {
  	return alert('Invalid format provided');
  }
  
  if(dCount === 4) {
     return format.replace('MMMM', month)
                  .replace('dddd', day)
                  .replace('yyyy', parsedDate.getFullYear());
	} else {
  	return format.replace('MMMM', month)
                  .replace('d', day)
                  .replace('yyyy', parsedDate.getFullYear());
  }
}

function getLongDateClick() {
	const date = getLongDate(new Date(), document.getElementById('format').value);
  document.getElementById('date').innerText = date;
}