Ember-moment
moment.js template helpers and computed property macros for Ember
Requirements
- Ember >= 1.10.0 (2.0-beta and canary also supported)
- If you need support for < Ember 1.10 please use ember-moment 1.x-2.x
Installing
- ember-cli < 0.2.3
ember install:addon ember-moment
- ember-cli >= 0.2.3
ember install ember-moment
Upgrading
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.
Usage
{{moment-format date}}
{{moment-from-now date}}
{{moment-to-now date}}
{{moment-duration ms}}
Advanced Usage
{{moment-format date outputFormat inputFormat}}
{{moment-from-now date}}
{{moment-to-now date}}
{{moment-duration number units}}
Live Updating of Displayed Time
{{moment-from-now date interval=1000}} // interval is in ms
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
ES6 Moment
This addon provides the ability to import moment as an ES6 module.
import moment from 'moment';
Computed Macro
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'),
shortDate: momentFormat('date', 'MM/DD/YYYY'),
timeSince: momentFromNow("12-25-1995", "MM-DD-YYYY", false),
computedNumHours: momentToNow("12-25-1995", "MM-DD-YYYY", false),
computedNumHours: momentDuration(10, 'hours')
});
Include Moment Timezone
You can optionally include the Moment Timezone package in your config/environment.js
like so:
module.exports = function() {
return {
moment: {
includeTimezone: 'all'
}
}
};
Configuration Options
Global Default Output Format
Your application may require a different moment format default other than LLLL
. Your application may want dates to be treated in the shorthand date form L
by default.
module.exports = function() {
return {
moment: {
outputFormat: 'L'
}
}
};
Global Allow Empty Dates
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
.
module.exports = function() {
return {
moment: {
allowEmpty: true
}
}
};
i18n support
Cherry pick locales (optimal)
module.exports = function(environment) {
return {
moment: {
includeLocales: ['es', 'fr-ca']
}
};
Include all locales into build
module.exports = function(environment) {
return {
moment: {
includeLocales: true
}
};
Configure default runtime locale
Globally
import moment from 'moment';
export default Ember.Route.extend({
beforeModel() {
moment.locale('es');
}
});
Locally
All helpers except a locale
argument, which is a string. This allows for overriding of the global locale.
{{moment-format date locale='es'}}
{{moment-duration date locale='es'}}
{{moment-from-now date locale='es'}}
{{moment-to-now date locale='es'}}
Feature set of i18n support within moment can be found here: http://momentjs.com/docs/#/i18n/
Frequently Asked Questions
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:
{{moment-format date outputFormat inputFormat}}
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)
{{moment-format date allow-empty=true}}
Development
Running Tests
ember test
ember test --server
Building
For more information on using ember-cli, visit http://www.ember-cli.com/.