h2qutc/angular-material-components

Hour not updating in DateTimePicker

Opened this issue · 0 comments

Wenn using a DateTimePicker and binding a moment date via ngmodel, the Hour spinner is only updated if the date(day, month or year) changes.

Minimum example:
html:

<mat-form-field appearance="fill">
  <mat-label>Time</mat-label>
  <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date"  [(ngModel)]="date">
  <mat-datepicker-toggle matSuffix [for]="$any(picker)"></mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker [showSpinners]="true" [showSeconds]="false" [stepHour]="1" [stepMinute]="60"
      [stepSecond]="60" [enableMeridian]="false" [disableMinute]="true">
  </ngx-mat-datetime-picker>
</mat-form-field>


<button (click)="add1h()">Add 1h</button>
<button (click)="add1d()">Add 1 day</button>

ts:

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "l, HH mm ss",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ]
})
export class AppComponent {
  date: moment.Moment = moment.utc();


  add1h(){
    this.date = moment(this.date.add(1, "hours"));
  }

  add1d(){
    this.date = moment(this.date.add(1, "days"));
  }
}

Wenn pressing "Add 1h" the date will change, also the input display changed, but if you open the datetimepicker the time dident change. If you change the hour and after that press "Add 1 Day" the Hour also updates.