moment.js template helpers and computed property macros for Ember
- Ember >= 1.10.0 (see installation instructions below)
- Ember CLI
- ember-cli < 0.2.3
ember install:addon [email protected]
- ember-cli >= 0.2.3
ember install [email protected]
- ember-cli < 0.2.3
ember install:addon [email protected]
- ember-cli >= 0.2.3
ember install [email protected]
It's advisable to run ember g ember-moment
between upgrades as dependencies may have been added, removed, or upgraded between releases. Please try this, along with clearing node_modules
and bower_components
before reporting issues after upgrading.
Recomputes the time ago every 1-second (1000 milliseconds). This is useful for "live" updating as time elapses.
NOTE: This feature is only supported in Ember >= 1.13.0
This addon provides the ability to import moment as an ES6 module.
import moment from 'moment';
import momentDuration from 'ember-moment/computeds/duration';
import momentFormat from 'ember-moment/computeds/format';
import momentFromNow from 'ember-moment/computeds/from-now';
import momentToNow from 'ember-moment/computeds/to-now';
export default Ember.Controller.extend({
date: new Date('2013-02-08T09:30:26'),
// Takes on the behavior of moment().format()
// http://momentjs.com/docs/#/displaying/format/
shortDate: momentFormat('date', 'MM/DD/YYYY'),
// first param: date input
// second param: date format http://momentjs.com/docs/#/parsing/string-format/ (optional)
// third param: hide suffix (optional, false by default)
// http://momentjs.com/docs/#/displaying/fromnow/
timeSince: momentFromNow("12-25-1995", "MM-DD-YYYY", false), // -> output: "2 years ago"
// first param: date input
// second param: date format http://momentjs.com/docs/#/parsing/string-format/ (optional)
// third param: hide prefix (optional, false by default)
// http://momentjs.com/docs/#/displaying/tonow
computedNumHours: momentToNow("12-25-1995", "MM-DD-YYYY", false), // -> output: "in 20 years"
// duration units: seconds, minutes, hours, days, weeks, months, years
// http://momentjs.com/docs/#/durations/
computedNumHours: momentDuration(10, 'hours')
});
You can optionally include the Moment Timezone package in your config/environment.js
like so:
// config/environment.js
module.exports = function() {
return {
moment: {
// Options:
// 'all' - all years, all timezones
// '2010-2020' - 2010-2020, all timezones
// 'none' - no data, just timezone API
includeTimezone: 'all'
}
}
};
Your application may require a default format other than LLLL
. For example, you may want dates to fallback on the shorthand form L
by default.
// config/environment.js
module.exports = function() {
return {
moment: {
outputFormat: 'L'
}
}
};
If null
, undefined
, or an empty string as a date to any of the moment helpers then you you will Invalid Date
in the output. To avoid this issue globally, you can set the option allowEmpty
which all of the helpers respect and will result in nothing being rendered instead of Invalid Date
.
// config/environment.js
module.exports = function() {
return {
moment: {
allowEmpty: true // default: false
}
}
};
// config/environment.js
module.exports = function(environment) {
return {
moment: {
// To cherry-pick specific locale support into your application.
// Full list of locales: https://github.com/moment/moment/tree/2.10.3/locale
includeLocales: ['es', 'fr-ca']
}
};
// config/environment.js
module.exports = function(environment) {
return {
moment: {
includeLocales: true
}
};
// app/routes/applicaton.js
export default Ember.Route.extend({
moment: Ember.inject.service(),
beforeModel() {
this.get('moment').changeLocale('es');
}
});
// app/routes/applicaton.js
export default Ember.Route.extend({
moment: Ember.inject.service(),
beforeModel() {
this.get('moment').changeTimeZone('America/Los_Angeles');
}
});
All helpers accept a locale
and timeZone
argument, which is a string. This allows for overriding of the global locale.
Documentation on i18n support within moment can be found here: http://momentjs.com/docs/#/i18n/ Documentation on timezone within moment can be found here: http://momentjs.com/timezone/docs/
Invalid Date
is being rendered into the DOM, how do I avoid this?
An invalid date string is being passed into momentjs and/or the input string format was omitted. For example, if you're using the moment-format
you'll pass the input format as the 3rd argument:
NOTE: for all other helpers, the input format string is the second argument.
If you are knowingly passing null, undefined, or an empty string and want to ignore the output of Invalid Date
then pass the option allow-empty=true
to the helper (all helpers accept this property)
git clone
this repositorynpm install
bower install
ember server
- Visit your app at http://localhost:4200.
ember test
ember test --server
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/.