add examples

Author: mmalerba

src/demo-app/system-config.ts

@@ -29,6 +29,7 @@ System.config({
 
     // TODO(devversion): replace once the index.ts file for the Material package has been added.
     '@angular/material': 'dist/packages/material/public-api.js',
+    '@angular/material-moment-adapter': 'dist/packages/material-moment-adapter/public-api.js',
     '@angular/cdk': 'dist/packages/cdk/index.js',
     '@angular/cdk/a11y': 'dist/packages/cdk/a11y/index.js',
     '@angular/cdk/accordion': 'dist/packages/cdk/accordion/index.js',

src/demo-app/tsconfig-aot.json

@@ -4,6 +4,8 @@
 {
   "extends": "./tsconfig-build",
   "compilerOptions": {
+    // Needed for Moment.js since it doesn't have a default export.
+    "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
     // TODO(paul): Remove once Angular has been upgraded and supports noUnusedParameters in AOT.
     "noUnusedParameters": false,

src/demo-app/tsconfig-build.json

@@ -2,6 +2,8 @@
 // since the demo-app will be served in the browser.
 {
   "compilerOptions": {
+    // Needed for Moment.js since it doesn't have a default export.
+    "allowSyntheticDefaultImports": true,
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,

src/demo-app/tsconfig.json

@@ -2,12 +2,15 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    // Needed for Moment.js since it doesn't have a default export.
+    "allowSyntheticDefaultImports": true,
     "rootDir": "..",
     "baseUrl": ".",
     "paths": {
       "@angular/cdk/*": ["../cdk/*"],
       "@angular/material/*": ["../lib/*"],
-      "@angular/material": ["../lib/public-api.ts"]
+      "@angular/material": ["../lib/public-api.ts"],
+      "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
     }
   },
   "include": ["./**/*.ts"]

src/lib/datepicker/datepicker-errors.ts

@@ -10,5 +10,6 @@
 export function createMissingDateImplError(provider: string) {
   return Error(
       `MatDatepicker: No provider found for ${provider}. You must import one of the following ` +
-      `modules at your application root: MatNativeDateModule, or provide a custom implementation.`);
+      `modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a ` +
+      `custom implementation.`);
 }

src/lib/datepicker/datepicker.md

@@ -67,7 +67,7 @@ code.
 As with other types of `<input>`, the datepicker works with `@angular/forms` directives such as
 `formGroup`, `formControl`, `ngModel`, etc.
 
-<!-- TODO - example -->
+<!-- example(datepicker-value) -->
 
 ### Date validation
 
@@ -111,12 +111,7 @@ The `(dateInput)` event will fire whenever the value changes due to the user typ
 date from the calendar. The `(dateChange)` event will fire whenever the user finishes typing input
 (on `<input>` blur), or when the user chooses a date from the calendar.
 
-<!-- TODO - example -->
-  
-```html
-<input [matDatepicker]="d" (dateInput)="onInput($event)" (dateChange)="onChange($event)">
-<mat-datepicker #d></mat-datepicker>
-```
+<!-- example(datepicker-events) -->
 
 ### Disabling parts of the datepicker
 
@@ -126,7 +121,7 @@ their disabled state from the `<input>`, but this can be overridden by setting t
 property on the datepicker or toggle elements. This can be useful if you want to disable text input
 but allow selection via the calendar or vice-versa.
 
-<!-- TODO example -->
+<!-- example(datepicker-disabled) -->
 
 ### Touch UI mode
 
@@ -169,21 +164,7 @@ export class MyApp {}
 
 It's also possible to set the locale at runtime using the `setLocale` method of the `DateAdapter`.
 
-```ts
-import { DateAdapter, NativeDateAdapter } from '@angular/material';
-
-@Component({
-  selector:    'foo',
-  template: ''
-})
-export class FooComponent {
-  constructor(dateAdapter: DateAdapter<NativeDateAdapter>) {
-    dateAdapter.setLocale('de-DE');
-  }
-}
-```
-
-<!-- TODO - example -->
+<!-- example(datepicker-locale) -->
 
 #### Choosing a date implementation and date format settings
 
@@ -224,10 +205,12 @@ the native `Date` object is the inability to set the parse format. We highly rec
 `MomentDateAdapter` or a custom `DateAdapter` that works with the formatting/parsing library of your
 choice.*
 
-<!-- TODO - example -->
+<!-- example(datepicker-moment) -->
 
 #### Customizing the date implementation
 
+<!-- TODO(mmalerba): Add a guide about this -->
+
 The datepicker does all of its interaction with date objects via the `DateAdapter`. Making the
 datepicker work with a different date implementation is as easy as extending `DateAdapter`, and
 using your subclass as the provider. You will also want to make sure that the `MAT_DATE_FORMATS`
@@ -244,27 +227,28 @@ provided in your app are formats that can be understood by your date implementat
 export class MyApp {}
 ```
 
-<!-- TODO guide -->
-
 #### Customizing the parse and display formats
 
 The `MAT_DATE_FORMATS` object is just a collection of formats that the datepicker uses when parsing
 and displaying dates. These formats are passed through to the `DateAdapter` so you will want to make
 sure that the format objects you're using are compatible with the `DateAdapter` used in your app.
-This example shows how to use the `NativeDateAdapter`, but with custom formats.
+
+If you want use one of the `DateAdapters` that ships with Angular Material, but use your own
+`MAT_DATE_FORMATS` you can import the `NativeDateModule` or `MomentDateModule`. These modules are
+identical to the "Mat"-prefixed versions (`MatNativeDateModule` and `MatMomentDateModule`) except
+they do not include the default formats. For example:
 
 ```ts
 @NgModule({
-  imports: [MatDatepickerModule],
+  imports: [MatDatepickerModule, NativeDateModule],
   providers: [
-    {provide: DateAdapter, useClass: NativeDateAdapter},
     {provide: MAT_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS},
   ],
 })
 export class MyApp {}
 ```
 
-<!-- TODO example -->
+<!-- example(datepicker-formats) -->
 
 #### Localizing labels and messages
 
@@ -282,8 +266,6 @@ application root module.
 export class MyApp {}
 ```
 
-<!-- TODO example -->
-
 ### Accessibility
 
 The `MatDatepickerInput` directive adds `aria-haspopup` attribute to the native input element, and it
@@ -349,4 +331,27 @@ will be added in future iterations, including:
 
 ### Troubleshooting
 
-<!-- TODO: fill in this section -->
+#### Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS
+
+This error is thrown if you have not provided all of the injectables the datepicker needs to work.
+The easiest way to resolve this is to import the `MatNativeDateModule` or `MatMomentDateModule` in
+your application's root module. See the section on
+[choosing a date implementation](#choosing-a-date-implementation-and-date-format-settings)) for more
+information.
+
+#### Error: A MatDatepicker can only be associated with a single input
+
+This error is thrown if more than one `<input>` tries to claim ownership over the same
+`<mat-datepicker>` (via the `matDatepicker` attribute on the input). A datepicker can only be
+associated with a single input.
+
+#### Error: Attempted to open an MatDatepicker with no associated input.
+
+This error occurs if your `<mat-datepicker>` is not associated with any `<input>`. To associate an
+input with your datepicker, create a template reference for the datepicker and assign it to the
+`matDatepicker` attribute on the input:
+
+```html
+<input [matDatepicker]="picker">
+<mat-datepicker #picker></mat-datepicker>
+```

src/lib/datepicker/datepicker.ts

@@ -250,7 +250,7 @@ export class MatDatepicker<D> implements OnDestroy {
    */
   _registerInput(input: MatDatepickerInput<D>): void {
     if (this._datepickerInput) {
-      throw Error('An MatDatepicker can only be associated with a single input.');
+      throw Error('A MatDatepicker can only be associated with a single input.');
     }
     this._datepickerInput = input;
     this._inputSubscription =

src/material-examples/datepicker-api/datepicker-api-example.ts

@@ -1,12 +1,9 @@
 import {Component} from '@angular/core';
 
-/**
- * @title Datepicker API
- */
+/** @title Datepicker open method */
 @Component({
   selector: 'datepicker-api-example',
   templateUrl: 'datepicker-api-example.html',
   styleUrls: ['datepicker-api-example.css'],
 })
-export class DatepickerApiExample {
-}
+export class DatepickerApiExample {}

src/material-examples/datepicker-disabled/datepicker-disabled-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/datepicker-disabled/datepicker-disabled-example.html

@@ -0,0 +1,23 @@
+<p>
+  <mat-form-field>
+    <input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
+    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
+    <mat-datepicker #dp1></mat-datepicker>
+  </mat-form-field>
+</p>
+
+<p>
+  <mat-form-field>
+    <input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
+    <mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
+    <mat-datepicker #dp2></mat-datepicker>
+  </mat-form-field>
+</p>
+
+<p>
+  <mat-form-field>
+    <input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
+    <mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
+    <mat-datepicker #dp3 disabled="false"></mat-datepicker>
+  </mat-form-field>
+</p>

src/material-examples/datepicker-disabled/datepicker-disabled-example.ts

@@ -0,0 +1,20 @@
+import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
+
+/** @title Disabled datepicker */
+@Component({
+  selector: 'datepicker-disabled-example',
+  templateUrl: 'datepicker-disabled-example.html',
+  styleUrls: ['datepicker-disabled-example.css'],
+})
+export class DatepickerDisabledExample {
+  disabled: FormGroup;
+
+  constructor(fb: FormBuilder) {
+    this.disabled = fb.group({
+      'input': null,
+      'popup': null,
+      'toggle': null,
+    });
+  }
+}

src/material-examples/datepicker-events/datepicker-events-example.css

@@ -0,0 +1,6 @@
+.example-events {
+  width: 400px;
+  height: 200px;
+  border: 1px solid #555;
+  overflow: auto;
+}

src/material-examples/datepicker-events/datepicker-events-example.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+  <input matInput [matDatepicker]="picker" placeholder="Input & change events"
+         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker #picker></mat-datepicker>
+</mat-form-field>
+
+<div class="example-events">
+  <div *ngFor="let e of events">{{e}}</div>
+</div>

src/material-examples/datepicker-events/datepicker-events-example.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
+
+/** @title Datepicker input and change events */
+@Component({
+  selector: 'datepicker-events-example',
+  templateUrl: 'datepicker-events-example.html',
+  styleUrls: ['datepicker-events-example.css'],
+})
+export class DatepickerEventsExample {
+  events: string[] = [];
+
+  addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
+    this.events.push(`${type}: ${event.value}`);
+  }
+}

src/material-examples/datepicker-filter/datepicker-filter-example.ts

@@ -1,8 +1,6 @@
 import {Component} from '@angular/core';
 
-/**
- * @title Datepicker Filter
- */
+/** @title Datepicker with filter validation */
 @Component({
   selector: 'datepicker-filter-example',
   templateUrl: 'datepicker-filter-example.html',

src/material-examples/datepicker-formats/datepicker-formats-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/datepicker-formats/datepicker-formats-example.html

@@ -0,0 +1,5 @@
+<mat-form-field>
+  <input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
+  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>

src/material-examples/datepicker-formats/datepicker-formats-example.ts

@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {MomentDateAdapter} from '@angular/material-moment-adapter';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+
+// Depending on whether rollup is used, moment needs to be imported differently.
+// Since Moment.js doesn't have a default export, we normally need to import using the `* as`
+// syntax. However, rollup creates a synthetic default module and we thus need to import it using
+// the `default as` syntax.
+import * as _moment from 'moment';
+import {default as _rollupMoment} from 'moment';
+const moment = _rollupMoment || _moment;
+
+// See the Moment.js docs for the meaning of these formats:
+// https://momentjs.com/docs/#/displaying/format/
+export const MY_FORMATS = {
+  parse: {
+    dateInput: 'LL',
+  },
+  display: {
+    dateInput: 'LL',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'LL',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+/** @title Datepicker with custom formats */
+@Component({
+  selector: 'datepicker-formats-example',
+  templateUrl: 'datepicker-formats-example.html',
+  styleUrls: ['datepicker-formats-example.css'],
+  providers: [
+    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
+    // application's root module. We provide it at the component level here, due to limitations of
+    // our example generation script.
+    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
+
+    {provide: MAT_DATE_FORMATS, useValue: MY_FORMATS},
+  ],
+})
+export class DatepickerFormatsExample {
+  date = new FormControl(moment());
+}

src/material-examples/datepicker-locale/datepicker-locale-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/datepicker-locale/datepicker-locale-example.html

@@ -0,0 +1,7 @@
+<mat-form-field>
+  <input matInput [matDatepicker]="dp" placeholder="Different locale">
+  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
+  <mat-datepicker #dp></mat-datepicker>
+</mat-form-field>
+
+<button mat-button (click)="french()">Dynamically switch to French</button>