CODEWITHSUNDEEP
node.jsmeteor
Nique
Nique

Reputation: 583

Display a formatted timestamp in template

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.

Upvotes: 1

Views: 2871

Answers (5)

kabirbaidhya
kabirbaidhya

Reputation: 3490

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

Upvotes: 1

Marijus
Marijus

Reputation: 29

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>

Upvotes: 1

Bo Lora
Bo Lora

Reputation: 11

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

Upvotes: 1

Jabbslad
Jabbslad

Reputation: 546

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.

Upvotes: 4

Joscha
Joscha

Reputation: 4693

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

Upvotes: 0

Related Questions