Format ISO Date to Text Month

by Matthew Day

HTML

The unformatted date is:
<div id="isoformat">2014-07-04T01:06:08-07:00</div>

The formatted date is:
<div id="format"></div>

CSS

div {
  margin-bottom: 20px;
}

JavaScript

var isoformat = document.getElementById('isoformat').innerHTML;
var readable = new Date(isoformat);  // When we pass the ISO format to the JS Date constructor, the return is "Fri Jul 04 2014 21:06:08 GMT-0400 (Eastern Daylight Time)"
var m = readable.getMonth();  // returns 6 (note that this number is one less than the number of the month in isoformat)
var d = readable.getDate();  // returns 15
var y = readable.getFullYear();  // returns 2012

// we define an array of the months in a year
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]

// we get the text name of the month by using the value of m to find the corresponding month name
var mlong = months[m];


var fulldate = document.getElementById('format');
fulldate.innerHTML = mlong + " " + d + ", " + y;


// Further Reading

// ISO
// https://www.iso.org/iso-8601-date-and-time-format.html

// JS Date constructor
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date