Angular Material datepicker 将时间戳设置为表单控件值

Question

                <input
                  [value]="question.timestampToMoment(row.controls[column.name].value)"
                  [formControlName]="column.name"
                  [required]="column.required"
                  matInput
                  [matDatepicker]="picker"
                  (dateChange)="question.onDateChange($event)"
                  placeholder="Choose a date"
                />

我要 FormControl附在此 datepicker将时间戳作为值，以便将时间戳发送回后端。然后在设置这个datepicker的值当值从后端返回时，我需要将其转换回 moment来自时间戳的对象。

我想timestampToMoment看起来像:return moment(value * 1000)
我不知道如何实现 onDateChange或任何其他方式来完成这项工作。 datepicker用途 moment.js .

Answer 1

正如@Eliseo 在评论中提到的，这里的诀窍是不包括 FormControl在 datepicker输入，并使用 dateChange手动更改 FormControl 的值的事件. value为 datepicker反过来可以通过将时间戳传递给函数来设置。

<input
  [value]="timestampToMoment(form.controls[key].value)"
  [required]="required"
  matInput
  [matDatepicker]="picker"
  (dateChange)="onDateChange($event, form.controls[key])"
  placeholder="Choose a date"
/>

timestampToMoment(value: number): Moment {
  return moment(value * 1000);
}

onDateChange(event: MatDatepickerInputEvent<any>, control: AbstractControl): void {
  control.setValue(event.value.valueOf() / 1000);
}