Angular Material 将时间戳设置为表单控件值的日期选择器

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"
                />

我希望附加到此 datepicker 的 FormControl 具有时间戳作为值，以便可以将时间戳发送回后端。然后在设置此 datepicker 的值时，当值从后端返回时，我需要将其从时间戳转换回 moment 对象。

我想 timestampToMoment 会是这样的：return moment(value * 1000)

我不知道如何实施 onDateChange 或任何其他方式来完成这项工作。 datepicker 使用 moment.js.

Answer 1

如@Eliseo 的评论中所述，这里的技巧是不在 datepicker 输入中包含 FormControl，并使用 dateChange 事件手动更改值的 FormControl。 datepicker 的 value 又可以通过将时间戳传递给函数来设置。

<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);
}

Angular Material 将时间戳设置为表单控件值的日期选择器

Angular Material datepicker to set timestamp as form control value

angular-material2

angular