Changing YYYY-MM-DD and 24 Hour Clock to a Formatted DateTime

Question

I have a webservice that returns the time as follows:

2015-04-22 15:09 // this is a string

I want to convert it to the following format:

TUE APR 21, 2015 7:50 AM 

Is there any date formatting function in JavaScript?

Answer 1

Two aspects to this:

1. Parsing that string to a date

2. Formatting the date

There are lots of date formatting libraries available for JavaScript, since the specification doesn't provide any formatting routines. MomentJS is one of them, but there are several.

But not using a library:

Parsing the string

If you replace the space in the string you're receiving with the letter T, you can parse it with new Date(...) because then it will be in the date/time format specified in ES5. However, there's a problem: ES5 got the format wrong. They based it on ISO-8601, but said that if there was no timezone indicator, code should act as though timezone Z (UTC/GMT) were specified. That's wrong; ISO-8601 says no timezone indicator means "local time." In ES6, they're changing the spec to match ISO-8601, but that means we're now in a situation where some implementations (current Firefox) do the ES5 thing, and others (current Chrome) do the ES6/ISO-8601 thing. (try it here) sigh Result? You can't trust what you get back if there's no timezone indicator on it.

If you know the value you're being given is UTC, it's really easy to parse: Change the space to a T and add a Z to the end:

var dt = new Date(str.replace(" ", "T") + "Z");

If you know it's meant to be "local" time, you have to parse it as though it were UTC, then add on the timezone offset:

var dt = new Date(str.replace(" ", "T") + "Z");
dt.setMinutes(dt.getMinutes() + dt.getTimezoneOffset());

I think that still works correctly on DST boundaries, but you'll want to test.

Formatting the string

Is there any date formatting function in JavaScript?

No, all you get is the default toString (the format of which is not specified by the specification) and toISOString which outputs in YYYY-MM-DDThh:mm:ssZ format.

You do get methods that give you the individual parts (either in local time [e.g., getHours] or in UTC [e.g., getUTCHours]).

Various examples:

// The string
var str = "2015-04-22 15:09";

// Get the date
var dt = new Date(str.replace(" ", "T"));

// Hours, minutes, seconds
snippet.log("Hours: " + dt.getHours());
snippet.log("Minutes: " + dt.getMinutes());
snippet.log("Seconds: " + dt.getSeconds());

// Day, month, year -- note that months start at 0
snippet.log("Day of month: " + dt.getDate());
snippet.log("Month: " + dt.getMonth()); // 3 = April
snippet.log("Year: " + dt.getFullYear());

// UTC stuff
snippet.log("Hours UTC: " + dt.getUTCHours());

<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

Answer 2

There is no date formatter in Javascript, however you can create custom date string from date object as following:

var day_names = new Array("SUN", "MON", "TUE", "WED", 
    "THU", "FRI", "SAT");

var month_names = new Array("JAN", "FEB", "MAR", "APR", "MAY", 
    "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC");

var date = new Date();
var curr_day = date.getDay();
var curr_date = date.getDate();
var curr_month = date.getMonth();
var curr_year = date.getFullYear();
var cur_hour = date.getHours();
var minutes = date.getMinutes();
var AMorPM = cur_hour >= 12 ? AMorPM = "PM" : AMorPM = "AM";
cur_hour = cur_hour > 12 ? cur_hour -= 12 : cur_hour;

if (cur_hour < 10) cur_hour = "0" + cur_hour;
if (minutes < 10) minutes = "0" + minutes;

var finalDate = "<b>" + day_names[curr_day] + "&nbsp;" + 
    month_names[curr_month] + "&nbsp;" + curr_date + ", " + 
    curr_year + "&nbsp;" + cur_hour + ":" + minutes + "&nbsp;" + 
    AMorPM + "</b>";

document.getElementById('dateTime').innerHTML = finalDate;

DEMO