Hi,
I’m VERY new to Ionic and haven’t used JS in years, so please forgive my ignorance… Your help over a current hurdle will be much appreciated.
I have a listVIew in a page where I’m trying to format a date/time for each item where the format is sensitive to the current time. So, for instance - as with email systems - if the item is timed within the past few minutes, it’s “time” is stated as “Now” whereas it is today, it is formatted as the time, whilst it is older, its format changes to the date (with no mention of the time). I have written a function that I’ll be wanting to call from several listView’s located in several different pages, so I gather that it could be best to set this up as a ‘directive’.
Thus I have set up the following…
import { Directive } from ‘@angular/core’;
import * as moment from ‘moment’;
@Directive({
selector: ‘[refresh-dates]’,
host: {
‘(ionScroll)’: ‘displayDate($dateStamp)’
}
})
export class RefreshDatesDirective {
dateStamp: any;
constructor() {
console.log(‘Hello RefreshDatesDirective Directive’);
}
displayDate(dateStamp: any) : string {
// if the item is datestamped as having occured some time in the future
if(this.dateStamp > moment()) {
return “Error”;
// if the item is datestamped within the past 5 mins
} else if(this.dateStamp > moment().subtract(5, ‘minutes’)) {
return this.dateStamp.fromNow(); // else “Now”?
// else if datestamped today
} else if(this.dateStamp > moment({hour: 0, minute: 0, seconds: 0})) {
return this.dateStamp.format(‘LT’); // “3:10 AM”
// else if datestamped yesterday
} else if(this.dateStamp > moment({hour: 0, minute: 0, seconds: 0}).subtract(‘days’, 1)) {
return “Yesterday”;
// else if datestamped this past week
} else if(this.dateStamp > moment().subtract(‘days’, 7)) {
return this.dateStamp.format(‘ddd, LT’); // “Thurs, 3:10 AM”
// else if datestamped this year
} else if(this.dateStamp.format(‘YY’) == moment().format(‘YY’)) {
return this.dateStamp.format(‘Do MMMM’); // “4th July”
} // else the item is datestamped as not having occurred this year
return this.dateStamp.format(‘Do MMMM YYYY’); // “4th July 2017” */
}
}
I’ve also added the following import into app.module.ts
import { RefreshDatesDirective } from ‘…/directives/refresh-dates/refresh-dates’;
@NgModule({
declarations: [
MyApp,
RefreshDatesDirective
],
…
In my page, I’ve made ion-content reference the directive
…and have then tried calling displayDates() by way of {{displayDate(item.dated)}} but how do I get it to refer / connect to the directive?
TIA.