Meteor How to alter the display of what Spacebars outputs?

Meteor How to alter the display of what Spacebars outputs?,meteor,spacebars,Meteor,Spacebars,So I have something like this in the template: {{#each posts}} <li>{{date}}</li> {{/each}} This displays fine, but the problem is that my "date" variable comes out as Sat Feb 07 2015 19:47:13 GMT-0800 (PST), which is accurate but kind of long and unneccessary. I want the date to appear simpler, like February 7, 2015 instead. However, please forgive me for my lack of understanding, but the only way in which I know how to do this is to store it in the pretty format to begin wi

So I have something like this in the template:

{{#each posts}}
    <li>{{date}}</li>
{{/each}}

This displays fine, but the problem is that my "date" variable comes out as

Sat Feb 07 2015 19:47:13 GMT-0800 (PST)
, which is accurate but kind of long and unneccessary.

I want the date to appear simpler, like

February 7, 2015
instead. However, please forgive me for my lack of understanding, but the only way in which I know how to do this is to store it in the pretty format to begin with, but this doesn't seem to be efficient if I have to do this every time I want something to look a little different.

Ideally, I'd like to wrap it in a moment() and produce something like this:

moment(date).format("MMMM Do YYYY")

I tried putting in this instead, but it doesn't work:

{{#each posts}}
    <li>{{moment(date).format("MMMM Do YYYY")}}</li>
{{/each}}

#1

Add a helper

Template.yourTemplate.helpers({
  formattedDate: function(){
    return moment(this.date).format("MM/DD/YYYY");  // or whatever format you prefer
  }
});

#2

You can create a register helper to handle the formatting of date:

helper.js

Template.registerHelper('FormatDate', function(date){
    return moment(date).format("MMMM Do YYYY")
})

Now you can do:

{{#each posts}}
    <li>{{FormateDate date}}</li>
{{/each}}

#3

Try with this.

Template.example.rendered = function(){
//here we are getting a new date
var d = moment(new Date());
//here we take the li element and we set it on the html
document.getElementById("dateFormated").innerHTML = d.format('LL');
}


<template name="example">
<li id="dateFormated"> </li>
</template>

Upate

Since you are using a {{#each}} iterator

You can do this.

var d = moment(new Date()).format('LL');

or

var d = moment(new Date());
dFormat = d.format('LL');

On the insert, insert a field like Posts.insert({submitted:dFormat})

and on the {{each}} call like you have

{{#each posts}}
    <li>{{subbmited}}</li>
{{/each}}

Without inserting on Databse (Another Option)

Template.example.helpers({
  formattedData:function(){
   return moment(new Date()).format('LL');
  } 
})

{{#each posts}}
        <li>{{formattedData}}</li>
    {{/each}}

#4

Add a helper

Template.yourTemplate.helpers({
  formattedDate: function(){
    return moment(this.date).format("MM/DD/YYYY");  // or whatever format you prefer
  }
});

#5

You can create a register helper to handle the formatting of date:

helper.js

Template.registerHelper('FormatDate', function(date){
    return moment(date).format("MMMM Do YYYY")
})

Now you can do:

{{#each posts}}
    <li>{{FormateDate date}}</li>
{{/each}}

#6

Try with this.

Template.example.rendered = function(){
//here we are getting a new date
var d = moment(new Date());
//here we take the li element and we set it on the html
document.getElementById("dateFormated").innerHTML = d.format('LL');
}


<template name="example">
<li id="dateFormated"> </li>
</template>

Upate

Since you are using a {{#each}} iterator

You can do this.

var d = moment(new Date()).format('LL');

or

var d = moment(new Date());
dFormat = d.format('LL');

On the insert, insert a field like Posts.insert({submitted:dFormat})

and on the {{each}} call like you have

{{#each posts}}
    <li>{{subbmited}}</li>
{{/each}}

Without inserting on Databse (Another Option)

Template.example.helpers({
  formattedData:function(){
   return moment(new Date()).format('LL');
  } 
})

{{#each posts}}
        <li>{{formattedData}}</li>
    {{/each}}

#7

Ah, this is it. I did not know you could use "this" in the helper to refer to a collection of items that was returned from another helper. If anyone reading this is confused, I thought that "this.date" would not refer to each of the "posts" but rather a "date" variable originally passed to the template.

#8

It refer's to you're current data context, so since you're current data context is the post at the point it's called, you can call 'this.date' to access it.

#9

I'm trying to do this through data that is output from Spacebars. Unless you are suggesting that I manipulate the DOM with jQuery after the template is rendered and then read/replace every single line item?

#10

I think in general you should not insert a formatted date into the database.

#11

Ah, this is it. I did not know you could use "this" in the helper to refer to a collection of items that was returned from another helper. If anyone reading this is confused, I thought that "this.date" would not refer to each of the "posts" but rather a "date" variable originally passed to the template.

#12

It refer's to you're current data context, so since you're current data context is the post at the point it's called, you can call 'this.date' to access it.

#13

I'm trying to do this through data that is output from Spacebars. Unless you are suggesting that I manipulate the DOM with jQuery after the template is rendered and then read/replace every single line item?

#14

I think in general you should not insert a formatted date into the database.