Type=time broken since 2.0.1

[JusuVh]

The initial value of the datetimepicker with type=time shows the date (i.e. '01/01/2000') instead of the time. When the input is focus and blurred, the correct time value shows again (i.e. '13:37').

The time value was shown correctly with 1.0.4.

[JusuVh]

For anybody intrerested, I worked around this by forcing the value of the input element to the correct format in the afteViewInit lifecycle hook.

Example code:

time = new FormControl(moment());

@ViewChild('timeInput') // reference to the input 
timeInput: ElementRef;

ngAfterViewInit() {
    if (type === 'time' && this.time.value) {
      this.timeInput.nativeElement.value = (this.time.value as moment.Moment).format('HH:mm');
    }
  }

[kuhnroyal]

I can not reproduce this on master with either native or moment adapter. Using the sample app and setting time: [new Date(), Validators.required] or time: new FormControl(moment()).

Can you provide a sample?

[ShaneLillieRAD]

I think I'm also having this issue on the 3.0.0 beta. I have essentially this setup:

<div fxLayout="column">
  <mat-checkbox #hasStartTime formControlName="has_start_time (change)="onEnableStartTime(levelConfig, $event)">Start Time</mat-checkbox>
  <div fxLayout="column" *ngIf="hasStartTime.checked">
    <mat-form-field>
      <input matInput placeholder="Start Time (UTC)" formControlName="start_time [matDatetimepicker]="startTimePicker" required autocomplete="false">
      <mat-datetimepicker-toggle [for]="startTimePicker" matSuffix></mat-datetimepicker-toggle>
      <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true" timeInterval="5">
       </mat-datetimepicker>
    </mat-form-field>
  </div>
</div>

onEnableStartTime(config: FormGroup, event: MatCheckboxChange) {
  const startTimeCtrl = config.get('start_time')!;
   if (event.checked && !startTimeCtrl.value.isValid()) {
    startTimeCtrl.setValue(moment.utc());
  }
}

In my case it starts invalid so the checkbox is not checked, but when I check the checkbox and the value becomes valid, it only shows the date until I click on the input to open the selector. Once that's open, the time displays alongside the date:

[knvpk]

Same problem for me also.

[knvpk]

I tried @JusuVh workaraound, but it is not fully cleared, I also actually have hide and show button for that field, when we toogle the input time field in ngIf, it is again showing the Date rather than time.

[newmanw]

I am also, having the same problem. Not sure if it helps, but if I use template driven forms and ngModel the time is set correctly. However using reactive forms does not work.

Note, I am seeing this when running angular 8 and timepicker 3.0.1 (docs mention this is compat w/ 8)

https://stackblitz.com/edit/angular-material-datetimepicker-issue-yuhskn