Angular Tip: date and time locale formatting

Angular docs have a link that gives a summary of date formatting functions here: https://docs.angularjs.org/api/ng/filter/date

It’s pretty easy to format date in the UI with the following filter syntax:

{{dateValue | date:'fullDate'}} Saturday, August 30, 2014 {{dateValue | date:'shortTime'}} 5:31 PM {{dateValue | date:'medium'}} Aug 30, 2014 5:31:58 PM {{dateValue | date:'MMM d, y h:mm:ss a Z'}} Aug 30, 2014 5:31:58 PM -0700

This date filter does not, however, convert the date to your browser locale or timezone. Further, the timezone is not presented as a string so that’s not presentation friendly.

Assuming you are following the practice of storing dates in UTC format, you’ll likely want to present dates to the user in their own timezone. To achieve this you can use these javascript Date functions:

toLocaleString() toLocaleDateString() toLocaleTimeString()

An example of this in code:

var convertedDate = dateToConvert.toLocaleString();

The result of toLocaleString() is something like:

"August 30, 2014 at 5:31:41 PM PDT".

Note that it converted the string value to my timezone and provided a string representation of the timezone. Thats what we want, ideally. To let the built-in functions take care of locale and formatting for us. There is, however, still a minor issue. This value will present differently depending on the browser’s default presentation format for date values. For example, toLocaleString() yields a these results on Chrome vs. Firefox:

Chrome: "8/30/2014 5:31:41 PM" Firefox: "August 30, 2014 at 5:31:41 PM PDT"

So, if you want predictable results in the formatting, rather than taking the output of toLocaleString() you’ll want to explicitly define the format string, AFTER you convert to the correct locale.

...convert the date in javascript var convertedDateString = dateToConvert.toLocaleString(); var convertedDate = new Date(convertedDateString); ... later, in angular {{convertedDate | date:'medium'}}

But, the above code unfortunately does not work. Someone had the bright idea that toLocaleString() should include the word “at” in the string sentence.

"August 30, 2014 at 5:31:41 PM PDT"

This produces an “Invalid Date” result when you try to convert it back. Not ISO friendly! I haven’t found a better solution for this except to strip the word “at” from the string and then convert. But, there are probably better javascript libraries than using the built-in capabilities I’m using for this illutration. What I came up with is:

var convertedDateString = dateToConvert.toLocaleString(); convertedDateString = convertedDateString.replace('at ', ''); var convertedDate = new Date(convertedDateString);

And then, this is formatted with a filter:

<p>Date Value: {{convertedDate | date:"medium"}}</p>

Originally published August 31, 2014.