How do I format the API date fields in the template? - ember.js

Question

My routes look like this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
return this.store.find('deliverySchedule');
}
});
My API payload returns deliverySchedules like this (see below).
{
"delivery_schedules": [
{
"id": 47,
"from": "0001-01-01T09:00:00.000Z",
"to": "0001-01-01T10:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.663Z",
"updated_at": "2015-01-12T16:17:05.663Z"
},
{
"id": 62,
"from": "0001-01-01T09:00:00.000Z",
"to": "0001-01-01T10:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.684Z",
"updated_at": "2015-01-12T16:17:05.684Z"
},
{
"id": 48,
"from": "0001-01-01T10:00:00.000Z",
"to": "0001-01-01T11:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.665Z",
"updated_at": "2015-01-12T16:17:05.665Z"
},
{
"id": 63,
"from": "0001-01-01T10:00:00.000Z",
"to": "0001-01-01T11:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.685Z",
"updated_at": "2015-01-12T16:17:05.685Z"
},
{
"id": 49,
"from": "0001-01-01T11:00:00.000Z",
"to": "0001-01-01T12:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.666Z",
"updated_at": "2015-01-12T16:17:05.666Z"
},
{
"id": 64,
"from": "0001-01-01T11:00:00.000Z",
"to": "0001-01-01T12:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.686Z",
"updated_at": "2015-01-12T16:17:05.686Z"
},
{
"id": 50,
"from": "0001-01-01T12:00:00.000Z",
"to": "0001-01-01T13:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.668Z",
"updated_at": "2015-01-12T16:17:05.668Z"
},
{
"id": 65,
"from": "0001-01-01T12:00:00.000Z",
"to": "0001-01-01T13:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.687Z",
"updated_at": "2015-01-12T16:17:05.687Z"
},
{
"id": 66,
"from": "0001-01-01T13:00:00.000Z",
"to": "0001-01-01T14:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.688Z",
"updated_at": "2015-01-12T16:17:05.688Z"
},
{
"id": 51,
"from": "0001-01-01T13:00:00.000Z",
"to": "0001-01-01T14:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.669Z",
"updated_at": "2015-01-12T16:17:05.669Z"
},
{
"id": 67,
"from": "0001-01-01T14:00:00.000Z",
"to": "0001-01-01T15:00:00.000Z",
"period": "tomorrow",
"status": "available",
"created_at": "2015-01-12T16:17:05.689Z",
"updated_at": "2015-01-12T16:17:05.689Z"
},
{
"id": 52,
"from": "0001-01-01T14:00:00.000Z",
"to": "0001-01-01T15:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.670Z",
"updated_at": "2015-01-12T16:17:05.670Z"
},
{
"id": 53,
"from": "0001-01-01T15:00:00.000Z",
"to": "0001-01-01T16:00:00.000Z",
"period": "today",
"status": "available",
"created_at": "2015-01-12T16:17:05.672Z",
"updated_at": "2015-01-12T16:17:05.672Z"
}
]
}
I have a template that looks like this:
<ul>
{{#each deliverySchedule in model}}
<li>
{{deliverySchedule.from}} - {{deliverySchedule.from}} ({{deliverySchedule.status}})
</li>
{{/each}}
</ul>
I want deliverySchedule.from and deliverySchedule.to to display something like: 1pm - 2pm (available). Right now it is displaying as:
Tue Jan 01 1901 17:00:00 GMT+0800 (SGT) - Tue Jan 01 1901 17:00:00 GMT+0800 (SGT) available
What is the right way to go about this? Should I turn the results of delivery_schedules into a new array in a controller and use something like moment.js to convert the from and to values to 1pm and 2pm formats respectively?

Answer 1

Apparently, I need to register the custom helper, following http://www.ember-cli.com/#resolving-handlebars-helpers
// app/helpers/convert-date-time.js
import Ember from "ember";
export default Ember.Handlebars.makeBoundHelper(function(value, options) {
var date = new Date(value);
var hours = date.getHours();
var minutes = date.getMinutes();
var ampm = hours >= 12 ? 'pm' : 'am';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
minutes = minutes < 10 ? '0'+minutes : minutes;
var strTime = hours + ':' + minutes + ' ' + ampm;
return strTime;
});
In a template:
{{convert-date-time deliverySchedule.from}}

Answer 2

You should use handelbar helpers in order to format your dates :)
Here is the documentation about it :
http://emberjs.com/guides/templates/writing-helpers/
You can use moment.js in your helper however depending on your needs it's may be over killing :)
In ember-cli use the command ember generate helper yourhelpername it will create a file in
app/helpers/ which looks like the following :
import Ember from 'ember';
function myhelper(value) {
//in your case format the date here ...for example ....
//you can also use moment.js and so on...
var toReturn=(new Date(value).getHours())+1;
if(toReturn >11){
toReturn=toReturn + " pm";
}else{
toReturn=toReturn + " am";
}
return toReturn;
}
export { myhelper };
export default Ember.Handlebars.makeBoundHelper(myhelper);
You then use {{myhelper deliverySchedule.from}}
you can also extend the helper by adding second parameters for options
import Ember from 'ember';
function myhelper(value,format) {
//in your case format the date here ...for example ....
//you can also use moment.js and so on...
var myDate=new Date(value);
var toReturn="";
switch(format){
case "dmy" :
toReturn=myDate.getDate()+" "+(myDate.getMonth()+1)+" "+myDate.getFullYear();
break;
case "ymd" :
toReturn=myDate.getFullYear()+" "+(myDate.getMonth()+1)+" "+myDate.getDate();
break;
default :
toReturn=(myDate.getMonth()+1)+" "+myDate.getDate();
break;
}
return toReturn;
}
export { myhelper };
export default Ember.Handlebars.makeBoundHelper(myhelper);
and in your template use
{{myhelper deliverySchedule.from "dmy"}}