Timepicker default time

[exitlol]

I have 2 UTC stamps coming from backend. I'd like to set up some values as default.

I am using reactive forms. When I open the dialog that hold the tamplate, no dafault value is set. Console error says:

ERROR TypeError: date.getHours is not a function at NgxMatNativeDateAdapter.getHour (angular-material-components-datetime-picker.js:3617) at NgxMatTimepickerComponent._updateHourMinuteSecond (angular-material-components-datetime-picker.js:1845) at NgxMatTimepickerComponent.writeValue (angular-material-components-datetime-picker.js:1783) at setUpControl (forms.js:2603) at FormGroupDirective.addControl (forms.js:6359) at FormControlName._setUpControl (forms.js:7010) at FormControlName.ngOnChanges (forms.js:6933) at checkAndUpdateDirectiveInline (core.js:27784) at checkAndUpdateNodeInline (core.js:38472) at checkAndUpdateNode (core.js:38411)

Each time I try to manually set up the time it logs this error to the console.

control setup:

 this.newForm = new FormGroup({
      startOfDay: new FormControl({ value: this.getDefaultTimeForTimepicker() }, Validators.required),
... // other controls
});

private getDefaultTimeForTimepicker() {
    let dateArr = [];
    const endOfDay= new Date(this.data.endOfDay);
    endOfDay.setMinutes(endOfDay.getMinutes() + 1);
    dateArr = [endOfDay.getHours(), endOfDay.getMinutes(), endOfDay.getSeconds()];
    return dateArr;
  }

Template:

<form id="newForm" [formGroup]="newForm">
  <div class='row'>
    <div class="column">
      <ngx-mat-timepicker formControlName="startOfDay"></ngx-mat-timepicker>
      <mat-error>
        <ng-container *ngIf="newForm.hasError('required', 'startOfDay')">
          {{ 'required-field' | translate }}
        </ng-container>
      </mat-error>
    </div>
... // other fields
</div
</form>

An example setup with reactive forms for timepicker would be helpful as well. Thanks

[h2qutc]

Hi, You could use @Input defaultTime to set the default time. Your formControl startOfDay should be Date or Moment, not a array. Something like that:

ngOnInit(){
     this.customDefaultTime = this.getDefaultTimeForTimepicker();
}

this.newForm = new FormGroup({
      startOfDay: new FormControl(
                 { value:  new Date() }, // or your default Date
                 Validators.required),
                 ... // other controls
});

private getDefaultTimeForTimepicker() {
    let dateArr = [];
    const endOfDay= new Date(this.data.endOfDay);
    endOfDay.setMinutes(endOfDay.getMinutes() + 1);
    dateArr = [endOfDay.getHours(), endOfDay.getMinutes(), endOfDay.getSeconds()];
    return dateArr;
  }

<ngx-mat-timepicker formControlName="startOfDay" [defaultTime]="customDefaultTime"></ngx-mat-timepicker>

[exitlol]

@h2qutc Thank you, but I rise with another series of questions.

Do I really need to provide a default time when I can get it in the Control initialization? If yes then what format is required for defaultTime to work correctly?

I am feeding the picker with the following array at the moment:

defaultTime : number[] = [0,1,0]; Do i need to feed it double digits for 24hr format to work?

Also if i'd like to disable the picker (both hour & min picker), can't I just do it from the Control setup?

Thanks

[MGellify]

Hi, You could use @input defaultTime to set the default time. Your formControl startOfDay should be Date or Moment, not a array. Something like that:

ngOnInit(){
     this.customDefaultTime = this.getDefaultTimeForTimepicker();
}

this.newForm = new FormGroup({
      startOfDay: new FormControl(
                 { value:  new Date() }, // or your default Date
                 Validators.required),
                 ... // other controls
});

private getDefaultTimeForTimepicker() {
    let dateArr = [];
    const endOfDay= new Date(this.data.endOfDay);
    endOfDay.setMinutes(endOfDay.getMinutes() + 1);
    dateArr = [endOfDay.getHours(), endOfDay.getMinutes(), endOfDay.getSeconds()];
    return dateArr;
  }

<ngx-mat-timepicker formControlName="startOfDay" [defaultTime]="customDefaultTime"></ngx-mat-timepicker>

I'm using defaultTime with the datetimepicker (version 16.0.1) and it doesn't seem to work, when input date is null the timepicker part is disabled, not allowing me to select any time. Looking at master, it seems that the defaultTime parameter is ignored. Is that so?