如何使用 Ngrx 和反应式在 Angular 中显示日期和时间戳

Question

我有复杂的图形，我想创建一个响应式表单构建器并在表单构建器中传递对象

this.objectForm = this.formBuilder.group({
...this.object
});

我从后端收到了 UTC 格式的日期(例如2011-08-12T20:17:46.384Z(。我只想在字段中显示日期mat-input但是当用户将注意力集中在他的日期和时间时，两者都应该保存在商店中。我不想向用户显示时间，但我希望它保存在数据库和 Ngrx 存储中。

以下是 HTML 代码：

<input matInput type="date" formControlName="SelectedDate" name="SelectedDate" id="SelectedDate" 
dateTime>

使用了不同的技术，例如构建自定义管道和自定义指令，但结果未以所需格式显示。formControlName(在上面提到的HTML中使用(只接受角度8中的字符串，type='date'只接受日期而不是时间。

以下是我们迄今为止正在尝试的代码：

import {Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
import {NgControl, NgModel} from '@angular/forms';
import {DatePipe, DecimalPipe} from '@angular/common';
@Directive({
selector: '[dateTime][formControlName]',
})
export class DateTime {

constructor(private el: ElementRef, public datePipe: DatePipe, private model: NgControl) {
}
ngOnInit() {
this.el.nativeElement.value = this.datePipe.transform(this.model.control.value, 'yyyy-MM-dd');
this.model.viewToModelUpdate(this.el.nativeElement.value);
}

@HostListener('ngModelChange', ['$event'])
onModelChange(event) {
}
@HostListener('focusout')
focusOUt() {
let date: Date = new Date(this.el.nativeElement.value);
}
}

Answer 1

如果您可以丢失原始时间(因为您无论如何都不会向用户显示它(，我只需在表单创建过程中将其转换为字符串，然后使用(new Date(form.value.SelectedDate)).toUTCString()将其转换回后端的完整UTC。

如果原始时间很重要，则在"选定日期"和"选定时间"中拆分日期时间。然后，您可以在 mat-input 中单独处理 SelectedDate，并在保存时将其与 SelectedTime 合并，然后再发送回后端。