docs(#163): action button sample

add an action button sample to the application. also document its usage in `README.md`.
kuhnroyal · Mar 15, 2023 · 0463774 · 0463774
1 parent 9eacd4c
commit 0463774
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -80,6 +80,18 @@ imports: [
 </form>
 ```
 
+You can optionally add action buttons inside the `mat-datetimepicker`.
+
+```html
+<mat-datetimepicker ...>
+  <mat-datetimepicker-actions
+    [cancelButtonLabel]="'Cancel'"
+    [confirmButtonLabel]="'Confirm'"
+  >
+  </mat-datetimepicker-actions>
+</mat-datetimepicker>
+```
+
 ## Date formatting
 
 In order to change the default input/output formats, a custom instance of `MAT_DATETIME_FORMATS` needs to be provided in

diff --git a/src/app/date.component.html b/src/app/date.component.html
@@ -25,14 +25,14 @@ <h2>
       required
     />
     <mat-error *ngIf="group.get('dateTime').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('dateTime').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('dateTime').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -58,14 +58,14 @@ <h2>
       placeholder="DateTime Year selector"
     />
     <mat-error *ngIf="group.get('dateTimeYear').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('dateTimeYear').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('dateTimeYear').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -107,8 +107,8 @@ <h2>
       placeholder="Time AM/PM"
     />
     <mat-error *ngIf="group.get('timeAMPM').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <mat-datetimepicker-toggle
@@ -190,14 +190,14 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
     <mat-error *ngIf="group.get('mintest').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('mintest').errors?.matDatepickerMin"
-      >min</mat-error
-    >
+      >min
+    </mat-error>
     <mat-error *ngIf="group.get('mintest').errors?.matDatepickerMax"
-      >max</mat-error
-    >
+      >max
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <input
@@ -220,11 +220,11 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
     <mat-error *ngIf="group.get('filtertest').errors?.required"
-      >required</mat-error
-    >
+      >required
+    </mat-error>
     <mat-error *ngIf="group.get('filtertest').errors?.matDatepickerFilter"
-      >filter</mat-error
-    >
+      >filter
+    </mat-error>
   </mat-form-field>
   <mat-form-field>
     <input
@@ -268,4 +268,26 @@ <h2>
       type="datetime"
     ></mat-datetimepicker>
   </mat-form-field>
+  <mat-form-field>
+    <mat-datetimepicker-toggle
+      [for]="datetimePickerWithActions"
+      matSuffix
+    ></mat-datetimepicker-toggle>
+    <mat-datetimepicker
+      #datetimePickerWithActions
+      type="datetime"
+      openOnFocus="true"
+      timeInterval="5"
+    >
+      <mat-datetimepicker-actions></mat-datetimepicker-actions>
+    </mat-datetimepicker>
+    <input
+      matInput
+      formControlName="start"
+      [matDatetimepicker]="datetimePickerWithActions"
+      required
+      autocomplete="false"
+      placeholder="With Action Buttons"
+    />
+  </mat-form-field>
 </form>