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

Author: crisbeto

docs-content/examples-highlighted/material/timepicker/index-ts.html

@@ -1,2 +1,8 @@
 <span class="hljs-keyword">export</span> {TimepickerOverviewExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-overview/timepicker-overview-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerFormsExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-forms/timepicker-forms-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerDatepickerIntegrationExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-datepicker-integration/timepicker-datepicker-integration-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerValidationExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-validation/timepicker-validation-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerOptionsExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-options/timepicker-options-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerCustomIconExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-custom-icon/timepicker-custom-icon-example&#x27;</span>;
+<span class="hljs-keyword">export</span> {TimepickerLocaleExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-locale/timepicker-locale-example&#x27;</span>;
 <span class="hljs-keyword">export</span> {TimepickerHarnessExample} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;./timepicker-harness/timepicker-harness-example&#x27;</span>;

docs-content/examples-highlighted/material/timepicker/timepicker-custom-icon/timepicker-custom-icon-example-html.html

@@ -0,0 +1,8 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Pick a time<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;picker&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker-toggle</span> <span class="hljs-attr">matIconSuffix</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;picker&quot;</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">matTimepickerToggleIcon</span>&gt;</span>globe<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">mat-timepicker-toggle</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>

docs-content/examples-highlighted/material/timepicker/timepicker-custom-icon/timepicker-custom-icon-example-ts.html

@@ -0,0 +1,16 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatIcon} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/icon&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatInputModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/input&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
+<span class="hljs-keyword">import</span> {provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Timepicker with custom toggle icon */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-custom-icon-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-custom-icon-example.html&#x27;</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [MatFormFieldModule, MatInputModule, MatTimepickerModule, MatIcon],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerCustomIconExample</span> </span>{}

docs-content/examples-highlighted/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example-css.html

@@ -0,0 +1,3 @@
+mat-<span class="hljs-selector-tag">form</span>-field {
+  <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">16px</span>;
+}

docs-content/examples-highlighted/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example-html.html

@@ -0,0 +1,18 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Meeting date<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span> [<span class="hljs-attr">matDatepicker</span>]=<span class="hljs-string">&quot;datepicker&quot;</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">&quot;value&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-datepicker</span> #<span class="hljs-attr">datepicker</span>/&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-datepicker-toggle</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;datepicker&quot;</span> <span class="hljs-attr">matSuffix</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Meeting time<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span>
+    [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;timepicker&quot;</span>
+    [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">&quot;value&quot;</span>
+    [<span class="hljs-attr">ngModelOptions</span>]=<span class="hljs-string">&quot;{updateOn: &#x27;blur&#x27;}&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">timepicker</span>/&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker-toggle</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;timepicker&quot;</span> <span class="hljs-attr">matSuffix</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{value}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

docs-content/examples-highlighted/material/timepicker/timepicker-datepicker-integration/timepicker-datepicker-integration-example-ts.html

@@ -0,0 +1,26 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {FormsModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatInputModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/input&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
+<span class="hljs-keyword">import</span> {provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatDatepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/datepicker&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Timepicker integration with datepicker */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-datepicker-integration-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-datepicker-integration-example.html&#x27;</span>,
+  <span class="hljs-attr">styleUrl</span>: <span class="hljs-string">&#x27;./timepicker-datepicker-integration-example.css&#x27;</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatTimepickerModule,
+    MatDatepickerModule,
+    FormsModule,
+  ],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerDatepickerIntegrationExample</span> </span>{
+  <span class="hljs-attr">value</span>: <span class="hljs-built_in">Date</span>;
+}

docs-content/examples-highlighted/material/timepicker/timepicker-forms/timepicker-forms-example-html.html

@@ -0,0 +1,10 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Pick a time<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span> [<span class="hljs-attr">formControl</span>]=<span class="hljs-string">&quot;formControl&quot;</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;picker&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker-toggle</span> <span class="hljs-attr">matIconSuffix</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;picker&quot;</span>/&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Value: {{formControl.value}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Touched: {{formControl.touched}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Dirty: {{formControl.dirty}}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>

docs-content/examples-highlighted/material/timepicker/timepicker-forms/timepicker-forms-example-ts.html

@@ -0,0 +1,24 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {FormControl, ReactiveFormsModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatInputModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/input&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
+<span class="hljs-keyword">import</span> {provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Timepicker forms integration */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-forms-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-forms-example.html&#x27;</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [MatFormFieldModule, MatInputModule, MatTimepickerModule, ReactiveFormsModule],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerFormsExample</span> </span>{
+  <span class="hljs-attr">formControl</span>: FormControl&lt;<span class="hljs-built_in">Date</span> | <span class="hljs-literal">null</span>&gt;;
+
+  <span class="hljs-function"><span class="hljs-title">constructor</span>(<span class="hljs-params"></span>)</span> {
+    <span class="hljs-keyword">const</span> initialValue = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();
+    initialValue.setHours(<span class="hljs-number">12</span>, <span class="hljs-number">30</span>, <span class="hljs-number">0</span>);
+    <span class="hljs-built_in">this</span>.formControl = <span class="hljs-keyword">new</span> FormControl(initialValue);
+  }
+}

docs-content/examples-highlighted/material/timepicker/timepicker-locale/timepicker-locale-example-html.html

@@ -0,0 +1,8 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">mat-form-field</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-label</span>&gt;</span>Pick a time<span class="hljs-tag">&lt;/<span class="hljs-name">mat-label</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">matInput</span> [(<span class="hljs-attr">ngModel</span>)]=<span class="hljs-string">&quot;value&quot;</span> [<span class="hljs-attr">matTimepicker</span>]=<span class="hljs-string">&quot;picker&quot;</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker-toggle</span> <span class="hljs-attr">matIconSuffix</span> [<span class="hljs-attr">for</span>]=<span class="hljs-string">&quot;picker&quot;</span>/&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">mat-timepicker</span> #<span class="hljs-attr">picker</span>/&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">mat-form-field</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mat-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">&quot;switchLocale()&quot;</span>&gt;</span>Dynamically switch to Bulgarian<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>

docs-content/examples-highlighted/material/timepicker/timepicker-locale/timepicker-locale-example-ts.html

@@ -0,0 +1,24 @@
+<span class="hljs-keyword">import</span> {ChangeDetectionStrategy, Component, inject} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {FormsModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/forms&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatTimepickerModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/timepicker&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatInputModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/input&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatFormFieldModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/form-field&#x27;</span>;
+<span class="hljs-keyword">import</span> {DateAdapter, provideNativeDateAdapter} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/core&#x27;</span>;
+<span class="hljs-keyword">import</span> {MatButtonModule} <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;@angular/material/button&#x27;</span>;
+
+<span class="hljs-comment">/** <span class="hljs-doctag">@title </span>Timepicker with different locale */</span>
+<span class="hljs-meta">@Component</span>({
+  <span class="hljs-attr">selector</span>: <span class="hljs-string">&#x27;timepicker-locale-example&#x27;</span>,
+  <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">&#x27;timepicker-locale-example.html&#x27;</span>,
+  <span class="hljs-attr">providers</span>: [provideNativeDateAdapter()],
+  <span class="hljs-attr">imports</span>: [MatFormFieldModule, MatInputModule, MatTimepickerModule, FormsModule, MatButtonModule],
+  <span class="hljs-attr">changeDetection</span>: ChangeDetectionStrategy.OnPush,
+})
+<span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">TimepickerLocaleExample</span> </span>{
+  <span class="hljs-keyword">private</span> <span class="hljs-keyword">readonly</span> _adapter = inject&lt;DateAdapter&lt;unknown, unknown&gt;&gt;(DateAdapter);
+  value = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2024</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">13</span>, <span class="hljs-number">45</span>, <span class="hljs-number">0</span>);
+
+  <span class="hljs-keyword">protected</span> <span class="hljs-function"><span class="hljs-title">switchLocale</span>(<span class="hljs-params"></span>)</span> {
+    <span class="hljs-built_in">this</span>._adapter.setLocale(<span class="hljs-string">&#x27;bg-BG&#x27;</span>);
+  }
+}