As every developer knows, handling timezones and the like is a real PITA. The best minds of our generation have dashed themselves against the jagged rocks of Daylight Savings Time and that part of Indiana that’s always 30 minutes behind the rest of Indiana.
In our application, like all good developers are storing all dates in UTC. Specifically, we are passing date strings in JSON to a PHP backend that will treat them as UTC. Given that, the backend requires a specific format which is a variation of the typical JSON date time ISO format you’ve probably seen. All dates should be in the form:
We want to let our users provide us dates in whatever timezone their current browser uses. In our case, we’re using a jQuery time picker plugin by Trent Richardson. When our users are picking dates, we’re telling the time picker to format them like this:
Oct 22, 2012 3:36 pm.
Clearly, we’ll need to translate these times as we move back and forth from the data layer to the presentation layer. To translate the UTC string to user-local time, we simply do this (where
post_at is the string representation of UTC time from the data layer):
moment.utc( post_at, "YYYY-MM-DD HH:mm:ss" ).local().format( "MMM DD, YYYY h:mm a" );
So, what we’re doing more specifically is creating a
moment object in
utc() mode. We are passing in the datetime string to parse into a Date() object and the format string of that datetime. We then translate the object to user-local time with
local() and then format into format we like for our time picker plugin.
Going the other way around, we do the reverse essentially. This time,
post_at is the value from the time picker’s input text field:
moment( post_at, "MMM DD, YYYY h:mm a" ).utc().format( "YYYY-MM-DD HH:mm:ss" );
We first create a
moment object in local mode passing it our value and a format string. Switch modes to
utc() and then format for the data layer.
I originally had about 20 lines of gnarly
Date() object manipulations to do the work of this two lines of code. Plus, I think my original code was wrong.
moment.js does lots of other nice things as well. Such as the simple:
to the sublime:
moment.duration(24, "hours").humanize(); // a day
There’s lots of other great features like relative time output:
moment([2007, 0, 29]).fromNow(); // 4 years ago
And for those of you coming from Python who love
var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000
There are comments.