feat(datepicker): Add Moment.js adapter (#6860)

* create moment adapter * add Moment to karma.conf.js * use MAT_DATE_LOCALE * tests are now running * add in tests * WIP: demo * add synthetic default imports for moment * add locale switching to demo * fix moment import issues with tests * fix aot * address comments * fix closure issue * add additional explanation of rollup issue * remove moment adapter demo since it is preventing sync into g3 (will add back as a docs example in future PR). * fix bad rebase
angular · Sep 12, 2017 · 9545427 · 9545427
1 parent 1cccd4b
commit 9545427
Show file tree

Hide file tree

Showing 22 changed files with 678 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -101,6 +101,7 @@
     "magic-string": "^0.21.3",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
+    "moment": "^2.18.1",
     "node-sass": "^4.5.3",
     "protractor": "^5.1.2",
     "request": "^2.81.0",

diff --git a/scripts/closure-compiler/build-devapp-bundle.sh b/scripts/closure-compiler/build-devapp-bundle.sh
@@ -8,9 +8,10 @@ set -e -o pipefail
 # Go to the project root directory
 cd $(dirname $0)/../..
 
-# Build a release of material and of the CDK package.
+# Build a release of material, material-moment-adapter, and cdk packages.
 $(npm bin)/gulp material:build-release:clean
 $(npm bin)/gulp cdk:build-release
+$(npm bin)/gulp material-moment-adapter:build-release
 
 # Build demo-app with ES2015 modules. Closure compiler is then able to parse imports.
 $(npm bin)/gulp :build:devapp:assets :build:devapp:scss
@@ -38,6 +39,7 @@ OPTS=(
   "--js_module_root=dist/packages"
   "--js_module_root=dist/releases/material"
   "--js_module_root=dist/releases/cdk"
+  "--js_module_root=dist/releases/material-moment-adapter"
   "--js_module_root=node_modules/@angular/core"
   "--js_module_root=node_modules/@angular/common"
   "--js_module_root=node_modules/@angular/compiler"
@@ -49,6 +51,7 @@ OPTS=(
   "--js_module_root=node_modules/@angular/platform-browser-dynamic"
   "--js_module_root=node_modules/@angular/animations"
   "--js_module_root=node_modules/@angular/animations/browser"
+  "--js_module_root=node_modules/moment"
 
   # Flags to simplify debugging.
   "--formatting=PRETTY_PRINT"
@@ -57,6 +60,7 @@ OPTS=(
   # Include the Material and CDK FESM bundles
   dist/releases/material/@angular/material.js
   dist/releases/cdk/@angular/cdk.js
+  dist/releases/material-moment-adapter/@angular/material-moment-adapter.js
 
   # Include all Angular FESM bundles.
   node_modules/@angular/core/@angular/core.js
@@ -71,8 +75,9 @@ OPTS=(
   node_modules/@angular/animations/@angular/animations.js
   node_modules/@angular/animations/@angular/animations/browser.js
 
-  # Include other dependencies like Zone.js and RxJS
+  # Include other dependencies like Zone.js, Moment.js, and RxJS
   node_modules/zone.js/dist/zone.js
+  node_modules/moment/moment.js
   $rxjsSourceFiles
 
   # Include all files from the demo-app package.

diff --git a/src/demo-app/system-config.ts b/src/demo-app/system-config.ts
@@ -9,6 +9,7 @@ System.config({
   map: {
     'rxjs': 'node:rxjs',
     'main': 'main.js',
+    'moment': 'node:moment/min/moment-with-locales.min.js',
 
     // Angular specific mappings.
     '@angular/core': 'node:@angular/core/bundles/core.umd.js',
@@ -26,6 +27,7 @@ System.config({
       'node:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
 
     '@angular/material': 'dist/bundles/material.umd.js',
+    '@angular/material-moment-adapter': 'dist/bundles/material-moment-adapter.umd.js',
     '@angular/cdk': 'dist/bundles/cdk.umd.js',
     '@angular/cdk/a11y': 'dist/bundles/cdk-a11y.umd.js',
     '@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js',

diff --git a/src/demo-app/tsconfig-aot.json b/src/demo-app/tsconfig-aot.json
@@ -11,7 +11,8 @@
     "outDir": ".",
     "paths": {
       "@angular/material": ["./material"],
-      "@angular/cdk/*": ["./cdk/*"]
+      "@angular/cdk/*": ["./cdk/*"],
+      "@angular/material-moment-adapter": ["./material-moment-adapter"]
     }
   },
   "files": [

diff --git a/src/demo-app/tsconfig-build.json b/src/demo-app/tsconfig-build.json
@@ -22,7 +22,8 @@
     "baseUrl": ".",
     "paths": {
       "@angular/material": ["../../dist/packages/material/public_api"],
-      "@angular/cdk/*": ["../../dist/packages/cdk/*"]
+      "@angular/cdk/*": ["../../dist/packages/cdk/*"],
+      "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"]
     }
   },
   "files": [

diff --git a/src/lib/core/datetime/date-adapter.ts b/src/lib/core/datetime/date-adapter.ts
@@ -7,6 +7,9 @@
  */
 
 import {InjectionToken, LOCALE_ID} from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {Subject} from 'rxjs/Subject';
+
 
 /** InjectionToken for datepicker that can be used to override default locale code. */
 export const MAT_DATE_LOCALE = new InjectionToken<string>('MAT_DATE_LOCALE');
@@ -19,6 +22,10 @@ export abstract class DateAdapter<D> {
   /** The locale to use for all dates. */
   protected locale: any;
 
+  /** A stream that emits when the locale changes. */
+  get localeChanges(): Observable<void> { return this._localeChanges; }
+  protected _localeChanges= new Subject<void>();
+
   /**
    * Gets the year component of the given date.
    * @param date The date to extract the year from.
@@ -184,6 +191,7 @@ export abstract class DateAdapter<D> {
    */
   setLocale(locale: any) {
     this.locale = locale;
+    this._localeChanges.next();
   }
 
   /**

diff --git a/src/lib/datepicker/datepicker-input.ts b/src/lib/datepicker/datepicker-input.ts
@@ -182,6 +182,8 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   private _datepickerSubscription = Subscription.EMPTY;
 
+  private _localeSubscription = Subscription.EMPTY;
+
   /** The form control validator for whether the input parses. */
   private _parseValidator: ValidatorFn = (): ValidationErrors | null => {
     return this._lastValueValid ?
@@ -228,6 +230,11 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
     if (!this._dateFormats) {
       throw createMissingDateImplError('MD_DATE_FORMATS');
     }
+
+    // Update the displayed date when the locale changes.
+    this._localeSubscription = _dateAdapter.localeChanges.subscribe(() => {
+      this.value = this.value;
+    });
   }
 
   ngAfterContentInit() {
@@ -245,6 +252,7 @@ export class MdDatepickerInput<D> implements AfterContentInit, ControlValueAcces
 
   ngOnDestroy() {
     this._datepickerSubscription.unsubscribe();
+    this._localeSubscription.unsubscribe();
     this._valueChange.complete();
     this._disabledChange.complete();
   }

diff --git a/src/material-moment-adapter/adapter/index.ts b/src/material-moment-adapter/adapter/index.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {
+  DateAdapter,
+  MAT_DATE_LOCALE,
+  MAT_DATE_LOCALE_PROVIDER,
+  MD_DATE_FORMATS
+} from '@angular/material';
+import {MomentDateAdapter} from './moment-date-adapter';
+import {MD_MOMENT_DATE_FORMATS} from './moment-date-formats';
+
+export * from './moment-date-adapter';
+export * from './moment-date-formats';
+
+
+@NgModule({
+  providers: [
+    MAT_DATE_LOCALE_PROVIDER,
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]}
+  ],
+})
+export class MomentDateModule {}
+
+
+@NgModule({
+  imports: [MomentDateModule],
+  providers: [{provide: MD_DATE_FORMATS, useValue: MD_MOMENT_DATE_FORMATS}],
+})
+export class MdMomentDateModule {}