formControl的角度日期对话答案

【问题标题】：Angular date conversation to moment for formControlformControl的角度日期对话
【发布时间】：2020-05-14 05:40:16
【问题描述】：

我需要在日期中使用时刻。我在这里感到困惑并导致了很多错误。我试图在我的代码中引入带有日期的时刻而不破坏任何东西。这是工作代码，在 chrome 中运行良好，但在 IE 中，年份显示不正确。年份不是2019的19，而是1919。经过研究，我知道这个问题可以通过使用moment解决。

//开始日期需要固定

  <div class="schedule-release-date" *ngIf="formControls['releaseEntryType'].value === 1">
      <mat-form-field [floatLabel]="">
        <input required matInput [matDatepicker]="releaseDatePicker" placeholder="Release Date" [formControl]="formControls['startDate']">
        <mat-datepicker-toggle matSuffix [for]="releaseDatePicker"></mat-datepicker-toggle>
        <mat-datepicker #releaseDatePicker></mat-datepicker>
      </mat-form-field>
    </div>


 entryTypeChanged(event: MatSelectChange) {
    if (
      event.value &&
      event.value === 1
    ) {
      this.displayDatePickerForScheduleReleases = true;
      if (!(this.releaseManagementInteractiveForm.get('startDate'))) {
        this.releaseManagementInteractiveForm.addControl(
          'startDate',
          new FormControl(new Date().toISOString())
        );
      } else {
        this.releaseManagementInteractiveForm.get('startDate').setValue(new Date().toISOString());
      }
    } else {
      this.displayDatePickerForScheduleReleases = false;
      this.releaseManagementInteractiveForm.removeControl(
        'startDate'
      );
    }
  }

【问题讨论】：

标签： angular angular-moment

【解决方案1】：

需要安装moment库

npm install moment  --save

在您的 Typescript 文件中导入和使用

import * as moment from 'moment';

如果你在导入使用时出错

import  moment from 'moment';

根据您的情况使用替换

 new Date() to  moment.utc()

解决您的问题

【讨论】：

谢谢，你能在这里告诉我吗，我如何在这里使用 moment.js。我使用了时刻，但我对 Angular 表单感到困惑 stackblitz.com/edit/datepicker-angular2
你到底想做什么
mat-datepicker 是由对象 Date 提供的，为什么要转换为字符串？
@shashikumar 不是我的代码对不起 if (releaseEntryTypeId === 1) { this.releaseModificationItem.releaseManagementInteractiveForm .get('startDate') .setValue(moment.utc(this.releaseDetails.startDate).toISOString ()); } 我改变了这个，但没有为我工作
@Eliseo 它是我需要修复的现有代码，我认为他们这样做是为了使格式一致

【解决方案2】：

如果您想在整个应用程序中使用时刻作为日期，您应该在 app.module 中导入 MatMomentDateModule 而不是 MatNativeDateModule

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
})
export class AppModule {}

这对moment有依赖，所以你也需要安装moment。

Angular Material - Choosing a date implementation and date format settings

【讨论】：