Skip to content

Commit 7a7ec7a

Browse files
mmalerbatinayuangao
mmalerba
authored and
tinayuangao
committed
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
1 parent 056d3b2 commit 7a7ec7a

File tree

6 files changed

+147
-5
lines changed

6 files changed

+147
-5
lines changed

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y'
1010
import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
1111
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
1212
import {RadioAccessibilityDemo} from './radio/radio-a11y';
13+
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
1314

1415
@NgModule({
1516
imports: [
@@ -23,12 +24,8 @@ export class AccessibilityRoutingModule {}
2324

2425
@NgModule({
2526
imports: [
26-
CommonModule,
27-
FormsModule,
28-
ReactiveFormsModule,
2927
AccessibilityRoutingModule,
30-
FormsModule,
31-
ReactiveFormsModule,
28+
CommonModule,
3229
DemoMaterialModule,
3330
FormsModule,
3431
ReactiveFormsModule,
@@ -40,6 +37,7 @@ export class AccessibilityRoutingModule {}
4037
ButtonToggleAccessibilityDemo,
4138
CheckboxAccessibilityDemo,
4239
ChipsAccessibilityDemo,
40+
DatepickerAccessibilityDemo,
4341
RadioAccessibilityDemo,
4442
]
4543
})

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export class AccessibilityDemo {
2121
{name: 'Button toggle', route: 'button-toggle'},
2222
{name: 'Checkbox', route: 'checkbox'},
2323
{name: 'Chips', route: 'chips'},
24+
{name: 'Datepicker', route: 'datepicker'},
2425
{name: 'Radio buttons', route: 'radio'},
2526
];
2627
}

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<section>
2+
<h2>Choose a date (e.g. choose your date of birth)</h2>
3+
<md-input-container>
4+
<input mdInput
5+
[mdDatepicker]="birthdayPicker"
6+
[(ngModel)]="birthday"
7+
#birthdayModel="ngModel"
8+
[max]="maxBirthday"
9+
required
10+
placeholder="Date of birth">
11+
<md-datepicker-toggle mdSuffix [for]="birthdayPicker"></md-datepicker-toggle>
12+
<md-error *ngIf="birthdayModel.hasError('required')">
13+
Please choose a date.
14+
</md-error>
15+
<md-error *ngIf="birthdayModel.hasError('mdDatepickerMax')">
16+
Please choose an earlier date.
17+
</md-error>
18+
</md-input-container>
19+
<md-datepicker #birthdayPicker startView="year"></md-datepicker>
20+
</section>
21+
22+
<section>
23+
<h2>Choose a date with touch UI (e.g. choose a payment date on mobile)</h2>
24+
<p>When would you like to schedule your payment?</p>
25+
<md-input-container>
26+
<input mdInput
27+
[mdDatepicker]="paymentPicker"
28+
[(ngModel)]="paymentDate"
29+
#paymentDateModel="ngModel"
30+
[min]="minPaymentDate"
31+
required
32+
aria-label="Payment date">
33+
<md-datepicker-toggle mdSuffix [for]="paymentPicker"></md-datepicker-toggle>
34+
<md-error *ngIf="paymentDateModel.hasError('required')">
35+
Please choose a date.
36+
</md-error>
37+
<md-error *ngIf="paymentDateModel.hasError('mdDatepickerMin')">
38+
Please choose a later date.
39+
</md-error>
40+
</md-input-container>
41+
<md-datepicker #paymentPicker></md-datepicker>
42+
</section>
43+
44+
<section>
45+
<h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
46+
<md-input-container>
47+
<input mdInput
48+
[mdDatepicker]="departPicker"
49+
[(ngModel)]="departDate"
50+
#departDateModel="ngModel"
51+
[min]="minTripDate"
52+
[max]="maxTripDate"
53+
required
54+
placeholder="Departure date">
55+
<md-datepicker-toggle mdSuffix [for]="departPicker"></md-datepicker-toggle>
56+
<md-error *ngIf="departDateModel.hasError('required')">
57+
Please choose a date.
58+
</md-error>
59+
<md-error *ngIf="departDateModel.hasError('mdDatepickerMin')">
60+
Please choose a later date.
61+
</md-error>
62+
<md-error *ngIf="departDateModel.hasError('mdDatepickerMax')">
63+
Please choose an earlier date.
64+
</md-error>
65+
</md-input-container>
66+
<md-datepicker #departPicker [startAt]="startTripDate"></md-datepicker>
67+
<md-input-container>
68+
<input mdInput
69+
[mdDatepicker]="returnPicker"
70+
[(ngModel)]="returnDate"
71+
#returnDateModel="ngModel"
72+
[min]="departDate || minTripDate"
73+
[max]="maxTripDate"
74+
placeholder="Return date">
75+
<md-datepicker-toggle mdSuffix [for]="returnPicker"></md-datepicker-toggle>
76+
<md-error *ngIf="returnDateModel.hasError('mdDatepickerMin') && !departDate">
77+
Please choose a later date.
78+
</md-error>
79+
<md-error *ngIf="returnDateModel.hasError('mdDatepickerMin') && departDate">
80+
Please choose a date after your departure.
81+
</md-error>
82+
<md-error *ngIf="returnDateModel.hasError('mdDatepickerMax')">
83+
Please choose an earlier date.
84+
</md-error>
85+
</md-input-container>
86+
<md-datepicker #returnPicker [startAt]="startTripDate"></md-datepicker>
87+
</section>
88+
89+
<section>
90+
<h2>Choose date with date filter (e.g. schedule a doctor appointment)</h2>
91+
<md-input-container>
92+
<input mdInput
93+
[mdDatepicker]="appointmentPicker"
94+
[(ngModel)]="appointmentDate"
95+
#appointmentDateModel="ngModel"
96+
[min]="minAppointmentDate"
97+
[max]="maxAppointmentDate"
98+
[mdDatepickerFilter]="weekdaysOnly"
99+
required
100+
placeholder="Appointment date">
101+
<md-datepicker-toggle mdSuffix [for]="appointmentPicker"></md-datepicker-toggle>
102+
<md-error *ngIf="appointmentDateModel.hasError('required')">
103+
Please choose a date.
104+
</md-error>
105+
<md-error *ngIf="appointmentDateModel.hasError('mdDatepickerMin') ||
106+
appointmentDateModel.hasError('mdDatepickerMax') ||
107+
appointmentDateModel.hasError('mdDatepickerFilter')">
108+
No appointments available on this date.
109+
</md-error>
110+
</md-input-container>
111+
<md-datepicker #appointmentPicker></md-datepicker>
112+
</section>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mat-input-container {
2+
width: 250px;
3+
}

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
moduleId: module.id,
5+
selector: 'datepicker-a11y',
6+
templateUrl: 'datepicker-a11y.html',
7+
styleUrls: ['datepicker-a11y.css'],
8+
})
9+
export class DatepickerAccessibilityDemo {
10+
birthday: Date;
11+
maxBirthday = new Date();
12+
13+
paymentDate = new Date(Date.now() + 48 * 60 * 60 * 1000);
14+
minPaymentDate = new Date(Date.now() + 48 * 60 * 60 * 1000);
15+
16+
departDate: Date;
17+
returnDate: Date;
18+
minTripDate = new Date();
19+
maxTripDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
20+
startTripDate = new Date(Date.now() + 31 * 24 * 60 * 60 * 1000);
21+
22+
appointmentDate: Date;
23+
minAppointmentDate = new Date();
24+
maxAppointmentDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000);
25+
weekdaysOnly = (d: Date) => d.getDay() != 0 && d.getDay() != 6;
26+
}

‎src/demo-app/a11y/routes.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,14 @@ import {CheckboxAccessibilityDemo} from './checkbox/checkbox-a11y';
55
import {ChipsAccessibilityDemo} from './chips/chips-a11y';
66
import {RadioAccessibilityDemo} from './radio/radio-a11y';
77
import {AccessibilityHome} from './a11y';
8+
import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
89

910
export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
1011
{path: '', component: AccessibilityHome},
1112
{path: 'button', component: ButtonAccessibilityDemo},
1213
{path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
1314
{path: 'checkbox', component: CheckboxAccessibilityDemo},
1415
{path: 'chips', component: ChipsAccessibilityDemo},
16+
{path: 'datepicker', component: DatepickerAccessibilityDemo},
1517
{path: 'radio', component: RadioAccessibilityDemo},
1618
];

0 commit comments

Comments
 (0)