Parse date of Facebook OpenGraph API response with JavasScript

Converting datetime string from Facebook API response to JavaScript Date object

Recently I had an issue while working on an update for my Facebook Album Browser plugin with dates returned from Facebook OpenGraph API. The dates are returned in the following form 2011-06-13T23:31:19+0000 and luckily for me, converting this string to an actual Date object in JavaScript worked pretty well for most of the browsers, but some of them like Safari on iPad did not know to convert this string to a Date object and because of that I was getting default JavaScript date 1970-01-01 00:00:00 UTC+00.

After some time spent googling and checking regular expressions, I did not find a suitable solution for this.

Because of this I had to do it step by step, splitting the string and pulling out the values for all the date segments (year, month, day, hours, minutes and seconds). If you check closely the date format Facebook OpenGraph API returns contains time zone as well, but if you check dates in response, timezone value is always +0000 which means the value is returned in UTC format.

Good thing about this is that this does not need to be handled especially, but date value is actually UTC date value, which will require converting UTC date value to local Date.

function parseDateString(dateStr) {
var dateDate = dateStr.split("T")[0];
var dateTime = dateStr.split("T")[1].substring(0, 8);
var dateResult = new Date(Date.UTC(
dateDate.split("-")[0], /* Year */
dateDate.split("-")[1], /* Month */
dateDate.split("-")[2], /* Day */
dateTime.split(":")[0], /* Hour */
dateTime.split(":")[1], /* Minute */
dateTime.split(":")[2] /* Second*/
));
return dateResult;
            }
    

As you can see from the function above double conversion is done to return the date value for the current client timezone by getting the local Date value from UTC.

Another useful thing that I noticed is that every client might have it's own date format set on local machine. This might not be so important, but from UX perspective it is for sure important as user aspects to see the date value in a format set on its local machine.

For this reason I used one more javascript method toLocalString which creates date-time string in local machine date-time format.

var localDateString = parseDateString("2011-06-13T23:31:19+0000").toLocaleString();
    

 

Disclaimer

Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.


About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN  Loginlinkedin Logintwitter Logingoogleplus Logingoogleplus

.NET

read more

SQL/T-SQL

read more

Umbraco CMS

read more

PowerShell

read more

Comments for this article