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

Author: mmalerba

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",

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.

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',

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": [

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": [

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();
   }
 
   /**

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();
   }

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 {}