February 26, 2013

localtime directive for angularjs

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"
      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:

12:53 PM 2/26/2013