1

How do i format a timestamp inside the template? I followed a tutorial on building a chat and it works. Now i expanded the chat with some features like deleting the message and putting the time in front of the message. But when i write {{timestamp}} inside the template a UNIX timestamp is being given. How do i format it to show time like '6:12'. The timestamp is being stored in a Messages collection.

Is the right place to manipulate the timestamp inside of the

Template.Messages.created = function ( ) { ... }

function?

Thanks in advance.

Nique
  • 543
  • 7
  • 21

5 Answers5

4

Although not essential in this case, I would recommend using Moment.js, it makes working with dates and times in Javascript a breeze.

You can install the package from Atmosphere or download the script into your client dir then use a helper similar to the one below:-

Template.Messages.helpers({
    created: function() { 
        var time = moment(this.timestamp);
        return time.format('h:mm a');
    }
});

NB: I've assumed timestamp is a var on the context object.

Jabbslad
  • 546
  • 3
  • 10
1

I use this library. It gives you all the date formatting you will ever need. With meteor just drop it in and you can use it in any helper to return the formatted date.

http://stevenlevithan.com/assets/misc/date.format.js

Bo Lora
  • 11
  • 1
1

If you want to avoid libraries and manipulate with Javascript Date object I would suggest (this assumes that date is in ISO format 2010-06-15T00:00:00, wich you can get from Date.toISOString()):

Implement format method (thanks JavaScript equivalent to printf/string.format), put it in i.e. lib/utils.js:

String.prototype.format = function(args, index) {
  return this.replace(/{(\w+)}/g, function(match, number) {
    return typeof args[index[number]] != 'undefined'
      ? args[index[number]]
      : match
    ;
  });
};

Create helper (put it into client/client.js)

Handlebars.registerHelper('formatDate',function(input, pattern){
    var iso = /^(\d{4})(?:-?W(\d+)(?:-?(\d+)D?)?|(?:-(\d+))?-(\d+))(?:[T ](\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?)?(?:Z(-?\d*))?$/;
    if(this[input]) {
        var parts = this[input].match(iso);
             return pattern.format(parts, {yyyy:1,MM:4,dd:5,hh:6,mm:7,ss:8,SSS:9});
        }
    return this[input];
});

Use the helper:

{{#each logs}}
   <tr>
      <td>{{formatDate 'ts' '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss}'}}</td>
Community
  • 1
  • 1
Marijus
  • 21
  • 2
1

Have a look at this package swag which offers lots of useful handlebars helpers.

Checkout its date/time helpers: https://github.com/elving/swag#dates

You can format date/time as easily like: 

var date = new Date()


{{formatDate date "%m/%d/%Y"}}
{{formatDate date "%I:%M%p"}}
{{formatDate date "%F"}}
{{formatDate date "%Y%m%dT%H%M%S%z"}}

07/26/2015
11:38PM
2015-08-28
20150828T233805-0004
kabirbaidhya
  • 3,264
  • 3
  • 34
  • 59
0

Have a look at Template helpers and the JavaScript Date object.

Joscha
  • 4,643
  • 1
  • 27
  • 34