How to use ember-moment - 10 common examples
To help you get started, we’ve selected a few ember-moment examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ilios / frontend / app / components / time-picker.js View on Github 
import moment from 'moment';
import momentFormat from 'ember-moment/computeds/format';
export default Component.extend({
classNames: ['time-picker'],
init() {
this._super(...arguments);
this.set('hours', ['1','2','3','4','5','6','7','8','9','10','11','12']);
this.set('minutes', ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']);
this.set('ampms', ['am', 'pm']);
},
date: null,
hour: momentFormat('date', 'h'),
minute: momentFormat('date', 'mm'),
ampm: momentFormat('date', 'a'),
hours: null,
minutes: null,
ampms: null,
actions: {
changeHour(string) {
let hour = parseInt(string, 10);
const ampm = this.get('ampm');
if (ampm === 'pm') {
hour += 12;
}
this.sendAction('action', hour, 'hour');import Component from '@ember/component';
import moment from 'moment';
import momentFormat from 'ember-moment/computeds/format';
export default Component.extend({
classNames: ['time-picker'],
init() {
this._super(...arguments);
this.set('hours', ['1','2','3','4','5','6','7','8','9','10','11','12']);
this.set('minutes', ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '53', '54', '55', '56', '57', '58', '59']);
this.set('ampms', ['am', 'pm']);
},
date: null,
hour: momentFormat('date', 'h'),
minute: momentFormat('date', 'mm'),
ampm: momentFormat('date', 'a'),
hours: null,
minutes: null,
ampms: null,
actions: {
changeHour(string) {
let hour = parseInt(string, 10);
const ampm = this.get('ampm');
if (ampm === 'pm') {
hour += 12;
}instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',
'endDayOfYear',
'endYear',
'endTime',async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',
'endDayOfYear',
'endYear',
'endTime',
function(){
let properties = [learnerGroups: DS.hasMany('learner-group', {async: true}),
instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',
'endDayOfYear',
'endYear',endDate: DS.attr('date'),
updatedAt: DS.attr('date'),
session: DS.belongsTo('session', {async: true}),
learnerGroups: DS.hasMany('learner-group', {async: true}),
instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',
'endDayOfYear',
'endYear',
'endTime',
function(){startDate: DS.attr('date'),
endDate: DS.attr('date'),
updatedAt: DS.attr('date'),
session: DS.belongsTo('session', {async: true}),
learnerGroups: DS.hasMany('learner-group', {async: true}),
instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',session: DS.belongsTo('session', {async: true}),
learnerGroups: DS.hasMany('learner-group', {async: true}),
instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',
'endDayOfYear',updatedAt: DS.attr('date'),
session: DS.belongsTo('session', {async: true}),
learnerGroups: DS.hasMany('learner-group', {async: true}),
instructorGroups: DS.hasMany('instructor-group', {async: true}),
learners: DS.hasMany('user', {
async: true,
inverse: 'offerings'
}),
instructors: DS.hasMany('user', {
async: true,
inverse: 'instructedOfferings'
}),
//startFoo and key properties are used in creating offering blocks
startDayOfYear: momentFormat('startDate', 'DDDD'),
startYear: momentFormat('startDate', 'YYYY'),
startTime: momentFormat('startDate', 'HHmm'),
endDayOfYear: momentFormat('endDate', 'DDDD'),
endYear: momentFormat('endDate', 'YYYY'),
endTime: momentFormat('endDate', 'HHmm'),
startYearAndDayOfYear: momentFormat('startDate', 'DDDDYYYY'),
endYearAndDayOfYear: momentFormat('endDate', 'DDDDYYYY'),
isSingleDay: computed('startYearAndDayOfYear', 'endYearAndDayOfYear', function(){
return this.get('startYearAndDayOfYear') === this.get('endYearAndDayOfYear');
}),
isMultiDay: not('isSingleDay'),
dateKey: computed('startDayOfYear', 'startYear', function(){
return this.get('startYear') + this.get('startDayOfYear');
}),
timeKey: computed(
'startDayOfYear',
'startYear',
'startTime',ember-moment
Moment.js template helpers Ember.js
