docs(demos): remove Intl usage from demos

mattlewis92 · Dec 27, 2017 · 8d18c5b · 8d18c5b
1 parent 0b94a31
commit 8d18c5b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 26 deletions.
diff --git a/demos/demo-modules/customise-date-formats/custom-date-formatter.provider.ts b/demos/demo-modules/customise-date-formats/custom-date-formatter.provider.ts
@@ -1,27 +1,22 @@
 import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
 
 export class CustomDateFormatter extends CalendarDateFormatter {
   // you can override any of the methods defined in the parent class
 
   public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
+    return new DatePipe(locale).transform(date, 'EEE', locale);
   }
 
   public monthViewTitle({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'short'
-    }).format(date);
+    return new DatePipe(locale).transform(date, 'MMM y', locale);
   }
 
   public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
+    return new DatePipe(locale).transform(date, 'EEE', locale);
   }
 
   public dayViewHour({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(date);
+    return new DatePipe(locale).transform(date, 'HH:mm', locale);
   }
 }
diff --git a/demos/demo-modules/i18n/custom-date-formatter.provider.ts b/demos/demo-modules/i18n/custom-date-formatter.provider.ts
@@ -1,11 +1,10 @@
 import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
 import { getISOWeek } from 'date-fns';
+import { DatePipe } from '@angular/common';
 
 export class CustomDateFormatter extends CalendarDateFormatter {
   public weekViewTitle({ date, locale }: DateFormatterParams): string {
-    const year: string = new Intl.DateTimeFormat(locale, {
-      year: 'numeric'
-    }).format(date);
+    const year: string = new DatePipe(locale).transform(date, 'y', locale);
     const weekNumber: number = getISOWeek(date);
     return `Semaine ${weekNumber} en ${year}`;
   }

diff --git a/demos/demo-modules/i18n/module.ts b/demos/demo-modules/i18n/module.ts
@@ -1,10 +1,14 @@
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { CalendarModule } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
 
+registerLocaleData(localeFr);
+
 @NgModule({
   imports: [
     CommonModule,

diff --git a/demos/demo-modules/show-dates-on-titles/custom-event-title-formatter.provider.ts b/demos/demo-modules/show-dates-on-titles/custom-event-title-formatter.provider.ts
@@ -1,5 +1,6 @@
 import { LOCALE_ID, Inject } from '@angular/core';
 import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
 
 export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
   constructor(@Inject(LOCALE_ID) private locale: string) {
@@ -9,23 +10,26 @@ export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
   // you can override any of the methods defined in the parent class
 
   month(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 
   week(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 
   day(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 }
diff --git a/src/modules/common/calendar-date-formatter.provider.ts b/src/modules/common/calendar-date-formatter.provider.ts
@@ -7,11 +7,12 @@ import { CalendarAngularDateFormatter } from './calendar-angular-date-formatter.
  *
  * ```typescript
  * import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
+ * import { DatePipe } from '@angular/common';
  *
  * class CustomDateFormatter extends CalendarDateFormatter {
  *
  *   public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
- *     return new Intl.DateTimeFormat(locale, {weekday: 'short'}).format(date); // use short week days
+ *     return new DatePipe(locale).transform(date, 'EEE', locale); // use short week days
  *   }
  *
  * }