demo(datepicker): create demos for datepicker a11y use cases (#6096)

* create demos for datepicker a11y use cases

* address comments

* update datepicker toggle to new API

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

@@ -10,6 +10,7 @@ import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'
 import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
+import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 
 @NgModule({
   imports: [
@@ -23,12 +24,8 @@ export class AccessibilityRoutingModule {}
 
 @NgModule({
   imports: [
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
     AccessibilityRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
+    CommonModule,
     DemoMaterialModule,
     FormsModule,
     ReactiveFormsModule,
@@ -40,6 +37,7 @@ export class AccessibilityRoutingModule {}
     ButtonToggleAccessibilityDemo,
     CheckboxAccessibilityDemo,
     ChipsAccessibilityDemo,
+    DatepickerAccessibilityDemo,
     RadioAccessibilityDemo,
   ]
 })

src/demo-app/a11y/a11y.ts

@@ -21,6 +21,7 @@ export class AccessibilityDemo {
     {name: 'Button toggle', route: 'button-toggle'},
     {name: 'Checkbox', route: 'checkbox'},
     {name: 'Chips', route: 'chips'},
+    {name: 'Datepicker', route: 'datepicker'},
     {name: 'Radio buttons', route: 'radio'},
   ];
 }

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

@@ -0,0 +1,112 @@
+<section>
+  <h2>Choose a date (e.g. choose your date of birth)</h2>
+  <md-input-container>
+    <input mdInput
+           [mdDatepicker]="birthdayPicker"
+           [(ngModel)]="birthday"
+           #birthdayModel="ngModel"
+           [max]="maxBirthday"
+           required
+           placeholder="Date of birth">
+    <md-datepicker-toggle mdSuffix [for]="birthdayPicker"></md-datepicker-toggle>
+    <md-error *ngIf="birthdayModel.hasError('required')">
+      Please choose a date.
+    </md-error>
+    <md-error *ngIf="birthdayModel.hasError('mdDatepickerMax')">
+      Please choose an earlier date.
+    </md-error>
+  </md-input-container>
+  <md-datepicker #birthdayPicker startView="year"></md-datepicker>
+</section>
+
+<section>
+  <h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
+  <p>When would you like to schedule your payment?</p>
+  <md-input-container>
+    <input mdInput
+           [mdDatepicker]="paymentPicker"
+           [(ngModel)]="paymentDate"
+           #paymentDateModel="ngModel"
+           [min]="minPaymentDate"
+           required
+           aria-label="Payment date">
+    <md-datepicker-toggle mdSuffix [for]="paymentPicker"></md-datepicker-toggle>
+    <md-error *ngIf="paymentDateModel.hasError('required')">
+      Please choose a date.
+    </md-error>
+    <md-error *ngIf="paymentDateModel.hasError('mdDatepickerMin')">
+      Please choose a later date.
+    </md-error>
+  </md-input-container>
+  <md-datepicker #paymentPicker></md-datepicker>
+</section>
+
+<section>
+  <h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
+  <md-input-container>
+    <input mdInput
+           [mdDatepicker]="departPicker"
+           [(ngModel)]="departDate"
+           #departDateModel="ngModel"
+           [min]="minTripDate"
+           [max]="maxTripDate"
+           required
+           placeholder="Departure date">
+    <md-datepicker-toggle mdSuffix [for]="departPicker"></md-datepicker-toggle>
+    <md-error *ngIf="departDateModel.hasError('required')">
+      Please choose a date.
+    </md-error>
+    <md-error *ngIf="departDateModel.hasError('mdDatepickerMin')">
+      Please choose a later date.
+    </md-error>
+    <md-error *ngIf="departDateModel.hasError('mdDatepickerMax')">
+      Please choose an earlier date.
+    </md-error>
+  </md-input-container>
+  <md-datepicker #departPicker [startAt]="startTripDate"></md-datepicker>
+  <md-input-container>
+    <input mdInput
+           [mdDatepicker]="returnPicker"
+           [(ngModel)]="returnDate"
+           #returnDateModel="ngModel"
+           [min]="departDate || minTripDate"
+           [max]="maxTripDate"
+           placeholder="Return date">
+    <md-datepicker-toggle mdSuffix [for]="returnPicker"></md-datepicker-toggle>
+    <md-error *ngIf="returnDateModel.hasError('mdDatepickerMin') && !departDate">
+      Please choose a later date.
+    </md-error>
+    <md-error *ngIf="returnDateModel.hasError('mdDatepickerMin') && departDate">
+      Please choose a date after your departure.
+    </md-error>
+    <md-error *ngIf="returnDateModel.hasError('mdDatepickerMax')">
+      Please choose an earlier date.
+    </md-error>
+  </md-input-container>
+  <md-datepicker #returnPicker [startAt]="startTripDate"></md-datepicker>
+</section>
+
+<section>
+  <h2>Choose date with date filter (e.g. schedule a doctor appointment)</h2>
+  <md-input-container>
+    <input mdInput
+           [mdDatepicker]="appointmentPicker"
+           [(ngModel)]="appointmentDate"
+           #appointmentDateModel="ngModel"
+           [min]="minAppointmentDate"
+           [max]="maxAppointmentDate"
+           [mdDatepickerFilter]="weekdaysOnly"
+           required
+           placeholder="Appointment date">
+    <md-datepicker-toggle mdSuffix [for]="appointmentPicker"></md-datepicker-toggle>
+    <md-error *ngIf="appointmentDateModel.hasError('required')">
+      Please choose a date.
+    </md-error>
+    <md-error *ngIf="appointmentDateModel.hasError('mdDatepickerMin') ||
+                     appointmentDateModel.hasError('mdDatepickerMax') ||
+                     appointmentDateModel.hasError('mdDatepickerFilter')">
+      No appointments available on this date.
+    </md-error>
+  </md-input-container>
+  <md-datepicker #appointmentPicker></md-datepicker>
+</section>

src/demo-app/a11y/datepicker/datepicker-a11y.scss

@@ -0,0 +1,3 @@
+.mat-input-container {
+  width: 250px;
+}

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

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'datepicker-a11y',
+  templateUrl: 'datepicker-a11y.html',
+  styleUrls: ['datepicker-a11y.css'],
+})
+export class DatepickerAccessibilityDemo {
+  birthday: Date;
+  maxBirthday = new Date();
+
+  paymentDate = new Date(Date.now() + 48 * 60 * 60 * 1000);
+  minPaymentDate = new Date(Date.now() + 48 * 60 * 60 * 1000);
+
+  departDate: Date;
+  returnDate: Date;
+  minTripDate = new Date();
+  maxTripDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
+  startTripDate = new Date(Date.now() + 31 * 24 * 60 * 60 * 1000);
+
+  appointmentDate: Date;
+  minAppointmentDate = new Date();
+  maxAppointmentDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
+  weekdaysOnly = (d: Date) => d.getDay() != 0 && d.getDay() != 6;
+}

src/demo-app/a11y/routes.ts

@@ -5,6 +5,7 @@ import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
 import {ChipsAccessibilityDemo} from './chips/chips-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
 import {AccessibilityHome} from './a11y';
+import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: '', component: AccessibilityHome},
@@ -12,5 +13,6 @@ export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
   {path: 'checkbox', component: CheckboxAccessibilityDemo},
   {path: 'chips', component: ChipsAccessibilityDemo},
+  {path: 'datepicker', component: DatepickerAccessibilityDemo},
   {path: 'radio', component: RadioAccessibilityDemo},
 ];