Merge pull request #138 from formio/bugfix/datetime-allow-manual-input

Fix(Datetime): support allowManualInput option

Author: travist

projects/angular-material-formio/src/lib/components/date/date.component.ts

@@ -21,46 +21,46 @@ import {FormControl} from '@angular/forms';
         </mat-datepicker-toggle>
         <mat-form-field class="example-full-width">
           <input
-                  *ngIf="enableTime && enableDate"
-                  matInput
-                  type="datetime-local"
-                  [placeholder]="instance.component.placeholder"
-                  [formControl]="displayControl"
-                  (input)="onChange()"
-                  readonly
+            *ngIf="enableTime && enableDate"
+            matInput
+            type="datetime-local"
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
           >
           <input
-                  *ngIf="enableTime && !enableDate"
-                  matInput
-                  [placeholder]="instance.component.placeholder"
-                  [formControl]="displayControl"
-                  [matMask]="formatTime"
-                  (input)="onChange()"
-                  readonly
+            *ngIf="enableTime && !enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            [matMask]="formatTime"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
           >
           <input
-                  *ngIf="!enableTime && enableDate"
-                  matInput
-                  [placeholder]="instance.component.placeholder"
-                  [formControl]="displayControl"
-                  (input)="onChange()"
-                  readonly
+            *ngIf="!enableTime && enableDate"
+            matInput
+            [placeholder]="instance.component.placeholder"
+            [formControl]="displayControl"
+            (input)="onChangeInput()"
+            [readonly]="!allowManualInput"
           >
         </mat-form-field>
 
         <mat-formio-calendar
-                #calendar
-                [minDate]="instance.component.datePicker.minDate || ''"
-                [maxDate]="instance.component.datePicker.maxDate || ''"
-                [dateFilter]="dateFilter"
-                [hidden]="!isPickerOpened"
-                (dateSelectEvent)="onChangeDate($event)"
-                (timeSelectEvent)="onChangeTime($event)"
-                [enableDate]="enableDate"
-                [enableTime]="enableTime"
-                [hourStep]="instance.component.timePicker.hourStep"
-                [minuteStep]="instance.component.timePicker.minuteStep"
-                [instance]="instance"
+          #calendar
+          [minDate]="instance.component.datePicker.minDate || ''"
+          [maxDate]="instance.component.datePicker.maxDate || ''"
+          [dateFilter]="dateFilter"
+          [hidden]="!isPickerOpened"
+          (dateSelectEvent)="onChangeDate($event)"
+          (timeSelectEvent)="onChangeTime($event)"
+          [enableDate]="enableDate"
+          [enableTime]="enableTime"
+          [hourStep]="instance.component.timePicker.hourStep"
+          [minuteStep]="instance.component.timePicker.minuteStep"
+          [instance]="instance"
         ></mat-formio-calendar>
         <mat-error *ngIf="instance.error">{{ instance.error.message }}</mat-error>
       </form>
@@ -74,6 +74,7 @@ export class MaterialDateComponent extends MaterialComponent {
   public isPickerOpened: boolean;
   public selectedDate: any;
   public selectedTime: any = '00:00';
+  public allowManualInput: boolean = true;
 
   @ViewChild('calendar', {static: false}) calendar;
 
@@ -110,6 +111,14 @@ export class MaterialDateComponent extends MaterialComponent {
     }
   }
 
+  onChangeInput() {
+    const value = this.dateFilter(this.displayControl.value) &&
+    this.checkMinMax(this.displayControl.value) ? this.displayControl.value : '';
+
+    this.control.setValue(value);
+    this.onChange();
+  }
+
   getDateTimeValue() {
     let newDate = '';
     let isSelectedTime = false;
@@ -160,15 +169,16 @@ export class MaterialDateComponent extends MaterialComponent {
     this.isDisabled() ? this.displayControl.disable() : this.displayControl.enable();
 
     if (this.instance) {
+      this.allowManualInput = this.instance.component.allowInput === false ? false : true;
       if (this.instance.component && this.instance.component.datePicker) {
-       const {minDate: min, maxDate: max} = this.instance.component.datePicker;
+        const {minDate: min, maxDate: max} = this.instance.component.datePicker;
 
-       // It improves the date to the full format if the customer set only a year. Otherwise we will have conflicts into the moment.js.
-       const { minDate, maxDate } = this.improveMinMaxDate(min, max);
-       this.instance.component.datePicker.minDate = minDate;
-       this.instance.component.datePicker.maxDate = maxDate;
+        // It improves the date to the full format if the customer set only a year. Otherwise we will have conflicts into the moment.js.
+        const { minDate, maxDate } = this.improveMinMaxDate(min, max);
+        this.instance.component.datePicker.minDate = minDate;
+        this.instance.component.datePicker.maxDate = maxDate;
       }
-     }
+    }
   }
 
   toggleCalendar(event) {