Format date in Meteor Handlebars bracers {{ timestamp }}

Question

When using Meteor's Handlebar bracers, how do you convert the output of {{ timestamp }} from Thu Jul 25 2013 19:33:19 GMT-0400 (Eastern Daylight Time) to Jul 25?

Tried {{ timestamp.toString('yyyy-MM-dd') }} but it gave an error

Note: The standard [`toString()` for `Date`s](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toUTCString) ignores any arguments passed to it and ECMAScript doesn't define any other methods that can format a `Date` based on a `String` like `'yyyy-MM-dd'`. If you're not already including a library which modifies `toString()`, have a look at http://stackoverflow.com/q/1056728 for suggestions. — Jonathan Lonowski, Jul 26 '13 at 07:41
here's a better description how to do this -> http://stackoverflow.com/questions/18580495/format-a-date-from-inside-a-handlebars-template-in-meteor — Boris Kotov, Sep 02 '13 at 20:48

Tarang · Accepted Answer · 2015-03-26T06:19:00.043

41

Use a handlebars helper:

Template.registerHelper("prettifyDate", function(timestamp) {
    return new Date(timestamp).toString('yyyy-MM-dd')
});

Then in your html:

{{prettifyDate timestamp}}

If you use moment:

Template.registerHelper("prettifyDate", function(timestamp) {
    return moment(new Date(timestamp)).fromNow();
});

edited Mar 26 '15 at 06:19

answered Jul 26 '13 at 06:29

Tarang

75,157
39
215
276

6

As @JonathanLonowski noted above, it's worth noting that `timestamp.toString()` will ignore any arguments passed to it. I find that using MomentJS makes all of this incredibly simple. – Spencer Dec 18 '13 at 20:57
@Akshat, note that after some flip flopping, the syntax is now [`Template.registerHelper`](http://docs.meteor.com/#/full/template_registerhelper) – KyleMit Mar 26 '15 at 01:56

score 3 · Answer 2 · answered Apr 02 '15 at 09:53

This works for me.

toString("yyyy-MM-dd") - doesn't convert it.

Template.registerHelper("prettifyDate", function(timestamp) {
    var curr_date = timestamp.getDate();
    var curr_month = timestamp.getMonth();
    curr_month++;
    var curr_year = timestamp.getFullYear();
    result = curr_date + ". " + curr_month + ". " + curr_year;
    return result;
});

score 1 · Answer 3 · answered Oct 25 '13 at 15:11

1

This worked for me

Handlebars.registerHelper("prettifyDate", function(timestamp) {
     return (new Date(timestamp)).format("yyyy-MM-dd");
});

answered Oct 25 '13 at 15:11

Harry

4,705
17
73
101

score 0 · Answer 4 · answered Jul 12 '19 at 15:13

Use a handlebars helper:

const exphbsConfig = exphbs.create({
    defaultLayout: 'main',
    extname: '.hbs',
    helpers:{

        prettifyDate:  function(timestamp) {
            function addZero(i) {
                if (i < 10) {
                  i = "0" + i;
                }
                return i;
            }

            var curr_date = timestamp.getDate();
            var curr_month = timestamp.getMonth();
            curr_month++;
            var curr_year = timestamp.getFullYear();

            var curr_hour = timestamp.getHours();
            var curr_minutes = timestamp.getMinutes();
            var curr_seconds = timestamp.getSeconds();

            result = addZero(curr_date)+ "/" + addZero(curr_month) + "/" + addZero(curr_year)+ '   ' +addZero(curr_hour)+':'+addZero(curr_minutes)+':'+addZero(curr_seconds);
            return result;
        }

    }    

});

app.engine('hbs', exphbsConfig.engine);
app.set('view engine', '.hbs');

Then in your html:

  <div class="card-footer">
      <small class="text-muted">Atualizada em: {{prettifyDate updatedAt}}    </small>
    </div>

Format date in Meteor Handlebars bracers {{ timestamp }}

4 Answers4