A little while back I wrote about a jQuery plugin I had that would convert UTC time stamps to the local timezone of the browser. Since then I have been experimenting a bit with AngularJS and wanted the same thing but in an angly way. Here is my attempt at porting that code over.
First I made a module that declared a directive:
@angular.module('localtime').directive 'localtime', ->
# Makes a string with only two characters, adding a leading zero
fmtZero = (str) ->
('0' + str).slice(-2)
# This is the function to change if you want to customize the format of the date
fmtDate= (d) ->
# format the date
hour = d.getHours()
if hour < 12
meridiem = "AM"
else
meridiem = "PM"
hour = 12 if hour is 0
hour = hour - 12 if hour > 12
hour + ":" + fmtZero(d.getMinutes()) + " " + meridiem + " " + (d.getMonth()+1)+ "/" + d.getDate() + "/" + d.getFullYear()
restrict: 'E'
link: (scope, element, attrs) ->
tagText = element.html()
element.html fmtDate(new Date(tagText))
element.attr "title", tagText
The real magic is in the link function that grabs the current html content for the element and overwrites it. To help with debugging I stick the original timestamp in the title attribute – which you can see when you mouse over a date.
Then in my angular app, I just include the module:
@myApp = angular.module('myApp', ['localtime'])
Now, in my markup I simply wrap the timestamps I care about in <localtime> tags and they get switched over to a nicely formatted string in the user’s local time zone.
The end result is a timestamp string going from this:
To this: