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

Material Design components for Angular

<section>
  <h2>Choose a date (e.g. choose your date of birth)</h2>
  <mat-form-field>
    <input matInput
           [matDatepicker]="birthdayPicker"
           [(ngModel)]="birthday"
           #birthdayModel="ngModel"
           [max]="maxBirthday"
           required
           placeholder="Date of birth">
    <mat-datepicker-toggle matSuffix [for]="birthdayPicker"></mat-datepicker-toggle>
    <mat-datepicker #birthdayPicker startView="year"></mat-datepicker>
    <mat-error *ngIf="birthdayModel.hasError('required')">
      Please choose a date.
    </mat-error>
    <mat-error *ngIf="birthdayModel.hasError('matDatepickerMax')">
      Please choose an earlier date.
    </mat-error>
  </mat-form-field>
</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>
  <mat-form-field>
    <input matInput
           [matDatepicker]="paymentPicker"
           [(ngModel)]="paymentDate"
           #paymentDateModel="ngModel"
           [min]="minPaymentDate"
           required
           aria-label="Payment date">
    <mat-datepicker-toggle matSuffix [for]="paymentPicker"></mat-datepicker-toggle>
    <mat-datepicker #paymentPicker></mat-datepicker>
    <mat-error *ngIf="paymentDateModel.hasError('required')">
      Please choose a date.
    </mat-error>
    <mat-error *ngIf="paymentDateModel.hasError('matDatepickerMin')">
      Please choose a later date.
    </mat-error>
  </mat-form-field>
</section>

<section>
  <h2>Choose date with startAt, min and max (e.g. schedule a departing and returning flight)</h2>
  <mat-form-field>
    <input matInput
           [matDatepicker]="departPicker"
           [(ngModel)]="departDate"
           #departDateModel="ngModel"
           [min]="minTripDate"
           [max]="maxTripDate"
           required
           placeholder="Departure date">
    <mat-datepicker-toggle matSuffix [for]="departPicker"></mat-datepicker-toggle>
    <mat-datepicker #departPicker [startAt]="startTripDate"></mat-datepicker>
    <mat-error *ngIf="departDateModel.hasError('required')">
      Please choose a date.
    </mat-error>
    <mat-error *ngIf="departDateModel.hasError('matDatepickerMin')">
      Please choose a later date.
    </mat-error>
    <mat-error *ngIf="departDateModel.hasError('matDatepickerMax')">
      Please choose an earlier date.
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput
           [matDatepicker]="returnPicker"
           [(ngModel)]="returnDate"
           #returnDateModel="ngModel"
           [min]="departDate || minTripDate"
           [max]="maxTripDate"
           placeholder="Return date">
    <mat-datepicker-toggle matSuffix [for]="returnPicker"></mat-datepicker-toggle>
    <mat-datepicker #returnPicker [startAt]="startTripDate"></mat-datepicker>
    <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && !departDate">
      Please choose a later date.
    </mat-error>
    <mat-error *ngIf="returnDateModel.hasError('matDatepickerMin') && departDate">
      Please choose a date after your departure.
    </mat-error>
    <mat-error *ngIf="returnDateModel.hasError('matDatepickerMax')">
      Please choose an earlier date.
    </mat-error>
  </mat-form-field>
</section>

<section>
  <h2>Choose date with date filter (e.g. schedule a doctor appointment)</h2>
  <mat-form-field>
    <input matInput
           [matDatepicker]="appointmentPicker"
           [(ngModel)]="appointmentDate"
           #appointmentDateModel="ngModel"
           [min]="minAppointmentDate"
           [max]="maxAppointmentDate"
           [matDatepickerFilter]="weekdaysOnly"
           required
           placeholder="Appointment date">
    <mat-datepicker-toggle matSuffix [for]="appointmentPicker"></mat-datepicker-toggle>
    <mat-datepicker #appointmentPicker></mat-datepicker>
    <mat-error *ngIf="appointmentDateModel.hasError('required')">
      Please choose a date.
    </mat-error>
    <mat-error *ngIf="appointmentDateModel.hasError('matDatepickerMin') ||
                     appointmentDateModel.hasError('matDatepickerMax') ||
                     appointmentDateModel.hasError('matDatepickerFilter')">
      No appointments available on this date.
    </mat-error>
  </mat-form-field>
</section>