WIP: demo

Author: mmalerba

src/demo-app/datepicker/datepicker-demo.html

@@ -105,3 +105,6 @@ <h2>Input disabled, datepicker popup enabled</h2>
                    [startView]="yearView ? 'year' : 'month'"></md-datepicker>
   </md-form-field>
 </p>
+
+<h2>Moment.js Datepicker</h2>
+<p><demo-moment-datepicker></demo-moment-datepicker></p>

src/demo-app/datepicker/moment-datepicker.html

@@ -0,0 +1,3 @@
+<input mdInput [mdDatepicker]="picker" [(ngModel)]="date" placeholder="Moment.js datepicker">
+<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
+<md-datepicker #picker></md-datepicker>

src/demo-app/datepicker/moment-datepicker.ts

@@ -0,0 +1,20 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {DateAdapter, MAT_DATE_LOCALE_PROVIDER, MD_DATE_FORMATS} from '@angular/material';
+import {MomentDateAdapter, MD_MOMENT_DATE_FORMATS} from '@angular/material-moment-adapter';
+import * as moment from 'moment';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'demo-moment-datepicker',
+  templateUrl: 'moment-datepicker.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    MAT_DATE_LOCALE_PROVIDER,
+    {provide: DateAdapter, useClass: MomentDateAdapter},
+    {provide: MD_DATE_FORMATS, useValue: MD_MOMENT_DATE_FORMATS},
+  ],
+})
+export class DemoMomentDatepicker {
+  date = moment();
+}

src/demo-app/demo-app/demo-module.ts

@@ -47,6 +47,7 @@ import {
   OverlayContainer,
 } from '@angular/material';
 import {TableHeaderDemo} from '../table/table-header-demo';
+import {DemoMomentDatepicker} from '../datepicker/moment-datepicker';
 
 @NgModule({
   imports: [
@@ -66,6 +67,7 @@ import {TableHeaderDemo} from '../table/table-header-demo';
     CheckboxDemo,
     DatepickerDemo,
     DemoApp,
+    DemoMomentDatepicker,
     DialogDemo,
     GesturesDemo,
     GridListDemo,

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

tools/gulp/tasks/development.ts

@@ -21,7 +21,7 @@ const materialOutPath = join(outputDir, 'packages', 'material');
 
 /** Array of vendors that are required to serve the demo-app. */
 const appVendors = [
-  '@angular', 'systemjs', 'zone.js', 'rxjs', 'hammerjs', 'core-js', 'web-animations-js'
+  '@angular', 'systemjs', 'zone.js', 'rxjs', 'hammerjs', 'core-js', 'web-animations-js', 'moment',
 ];
 
 /** Glob that matches all required vendors for the demo-app. */

tools/gulp/util/task_helpers.ts

@@ -130,7 +130,9 @@ export function buildAppTask(appName: string) {
     .filter(taskName => gulp.hasTask(taskName));
 
   return sequenceTask(
-    'material:clean-build',
+    // Build all required packages for serving the devapp by just building the moment-adapter
+    // package. All dependencies of that package (material, cdk) will be built automatically.
+    'material-moment-adapter:clean-build',
     [...buildTasks]
   );
 }

tsconfig.json

@@ -17,6 +17,7 @@
     "paths": {
       "@angular/material": ["./src/lib/public_api.ts"],
       "@angular/cdk/*": ["./src/cdk/*"],
+      "@angular/material-moment-adapter": ["./src/material-moment-adapter"],
       "@angular/material-examples": ["./src/material-examples"],
       "material2-build-tools": ["./tools/package-tools"]
     }