Content Comparison

References

• Material Documentation

• Dashboard Live Example

Example

...

Usage

Structure

<mat-form-field class="input-datepicker">
  <label>Datepicker</label>
  <input matInput>
  <mat-datepicker-toggle></mat-datepicker-toggle>
  <mat-datepicker></mat-datepicker>
</mat-form-field>

Container

• Every datepicker should have a mat-form-field container with a class of input-datepicker, which formats its' label, calendar icon and datepicker styles, positioning and spacing.

Label

• Use <label> for the datepicker label

Input

• Use mat-input for all instances of date inputs