docs(material/timepicker): add timepicker documentation and live examples

Populates the timepicker's guide and add live examples.

Author: crisbeto

src/components-examples/material/timepicker/BUILD.bazel

@@ -15,8 +15,14 @@ ng_module(
     deps = [
         "//src/cdk/testing",
         "//src/cdk/testing/testbed",
+        "//src/material/datepicker",
+        "//src/material/form-field",
+        "//src/material/icon",
+        "//src/material/input",
         "//src/material/timepicker",
         "//src/material/timepicker/testing",
+        "@npm//@angular/common",
+        "@npm//@angular/forms",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",
     ],

src/components-examples/material/timepicker/index.ts

@@ -1,2 +1,7 @@
 export {TimepickerOverviewExample} from './timepicker-overview/timepicker-overview-example';
+export {TimepickerFormsExample} from './timepicker-forms/timepicker-forms-example';
+export {TimepickerDatepickerIntegrationExample} from './timepicker-datepicker-integration/timepicker-datepicker-integration-example';
+export {TimepickerValidationExample} from './timepicker-validation/timepicker-validation-example';
+export {TimepickerOptionsExample} from './timepicker-options/timepicker-options-example';
+export {TimepickerCustomIconExample} from './timepicker-custom-icon/timepicker-custom-icon-example';
 export {TimepickerHarnessExample} from './timepicker-harness/timepicker-harness-example';

src/components-examples/material/timepicker/timepicker-custom-icon/timepicker-custom-icon-example.html

@@ -0,0 +1,8 @@
+<mat-form-field>
+  <mat-label>Pick a time</mat-label>
+  <input matInput [matTimepicker]="picker">
+  <mat-timepicker-toggle matIconSuffix [for]="picker">
+    <mat-icon matTimepickerToggleIcon>globe</mat-icon>
+  </mat-timepicker-toggle>
+  <mat-timepicker #picker/>
+</mat-form-field>

src/components-examples/material/timepicker/timepicker-custom-icon/timepicker-custom-icon-example.ts

@@ -0,0 +1,16 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatIcon} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {provideNativeDateAdapter} from '@angular/material/core';
+
+/** @title Timepicker with custom toggle icon */
+@Component({
+  selector: 'timepicker-custom-icon-example',
+  templateUrl: 'timepicker-custom-icon-example.html',
+  providers: [provideNativeDateAdapter()],
+  imports: [MatFormFieldModule, MatInputModule, MatTimepickerModule, MatIcon],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerCustomIconExample {}

src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  margin-right: 16px;
+}

src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.html

@@ -0,0 +1,18 @@
+<mat-form-field>
+  <mat-label>Meeting date</mat-label>
+  <input matInput [matDatepicker]="datepicker" [(ngModel)]="value">
+  <mat-datepicker #datepicker/>
+  <mat-datepicker-toggle [for]="datepicker" matSuffix/>
+</mat-form-field>
+
+<mat-form-field>
+  <mat-label>Meeting time</mat-label>
+  <input matInput
+    [matTimepicker]="timepicker"
+    [(ngModel)]="value"
+    [ngModelOptions]="{updateOn: 'blur'}">
+  <mat-timepicker #timepicker/>
+  <mat-timepicker-toggle [for]="timepicker" matSuffix/>
+</mat-form-field>
+
+<p>Value: {{value}}</p>

src/components-examples/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example.ts

@@ -0,0 +1,26 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+
+/** @title Timepicker integration with datepicker */
+@Component({
+  selector: 'timepicker-datepicker-integration-example',
+  templateUrl: 'timepicker-datepicker-integration-example.html',
+  styleUrl: './timepicker-datepicker-integration-example.css',
+  providers: [provideNativeDateAdapter()],
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatTimepickerModule,
+    MatDatepickerModule,
+    FormsModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerDatepickerIntegrationExample {
+  value: Date;
+}

src/components-examples/material/timepicker/timepicker-forms/timepicker-forms-example.html

@@ -0,0 +1,10 @@
+<mat-form-field>
+  <mat-label>Pick a time</mat-label>
+  <input matInput [formControl]="formControl" [matTimepicker]="picker">
+  <mat-timepicker-toggle matIconSuffix [for]="picker"/>
+  <mat-timepicker #picker/>
+</mat-form-field>
+
+<p>Value: {{formControl.value}}</p>
+<p>Touched: {{formControl.touched}}</p>
+<p>Dirty: {{formControl.dirty}}</p>

src/components-examples/material/timepicker/timepicker-forms/timepicker-forms-example.ts

@@ -0,0 +1,24 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {MatTimepickerModule} from '@angular/material/timepicker';
+import {MatInputModule} from '@angular/material/input';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {provideNativeDateAdapter} from '@angular/material/core';
+
+/** @title Timepicker forms integration */
+@Component({
+  selector: 'timepicker-forms-example',
+  templateUrl: 'timepicker-forms-example.html',
+  providers: [provideNativeDateAdapter()],
+  imports: [MatFormFieldModule, MatInputModule, MatTimepickerModule, ReactiveFormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TimepickerFormsExample {
+  formControl: FormControl<Date | null>;
+
+  constructor() {
+    const initialValue = new Date();
+    initialValue.setHours(12, 30, 0);
+    this.formControl = new FormControl(initialValue);
+  }
+}

src/components-examples/material/timepicker/timepicker-options/timepicker-options-example.html

@@ -0,0 +1,30 @@
+<h3>Interval examples</h3>
+
+<div>
+  <mat-form-field>
+    <mat-label>Every 45 minutes</mat-label>
+    <input matInput [matTimepicker]="minutesPicker">
+    <mat-timepicker-toggle matIconSuffix [for]="minutesPicker"/>
+    <mat-timepicker interval="45min" #minutesPicker/>
+  </mat-form-field>
+</div>
+
+<div>
+  <mat-form-field>
+    <mat-label>Every 3.5 hours</mat-label>
+    <input matInput [matTimepicker]="hoursPicker">
+    <mat-timepicker-toggle matIconSuffix [for]="hoursPicker"/>
+    <mat-timepicker interval="3.5h" #hoursPicker/>
+  </mat-form-field>
+</div>
+
+<h3>Custom list of options</h3>
+
+<div>
+  <mat-form-field>
+    <mat-label>Pick a time of day</mat-label>
+    <input matInput [matTimepicker]="customPicker">
+    <mat-timepicker-toggle matIconSuffix [for]="customPicker"/>
+    <mat-timepicker [options]="customOptions" #customPicker/>
+  </mat-form-field>
+</div>