反应形式的Angular 6日期格式MM / dd / yyyy

Question

我正在使用带有响应式表单的 Angular 6，并且我试图弄清楚如何格式化从 webapi 返回的日期值。日期显示为 1973-10-10T00:00:00，我想将其格式化为 10/10/1973。下面是检索数据并显示它的代码。 webapi json dob 值为 1973-10-10T00:00:00。模型中的dob值是Date类型。

html

<input formControlName="dob" type="text" [value]="dob | date: 'MM/dd/yyyy'" class="form-control" />

装订形式

this.userInfoForm = this.fb.group({
      'userId': ['', [Validators.required]],
      'dob': ['', [Validators.required]]
});

加载保存

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {
      this.userInfoModel$ = data as UserInfoModel;
      this.userInfoForm.patchValue(this.userInfoModel$);
});

api调用

accountUserInfo(userId: number) {
return this.http.post(this.url + "UserInfo", userId)
.pipe(
  retry(3),
  catchError(this.handleError)
)}

感谢任何有关如何将日期转换为 MM/dd/yyyy 格式的帮助或指导。将 html 设置为日期值确实使它看起来不错，但我不想使用内置的浏览器日期显示，所以我需要将其转换为字符串。

提前致谢。

Answer 1

在使用 datepicker 时遇到了同样的问题。 解决方案很简单：将输入类型更改为“日期”

之前：

<input type="text" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">

之后：

<input type="date" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">

Answer 2

值绑定的设置无关紧要，因为您已指定将覆盖任何现有值的 formControlName。似乎您可以在将日期设置为 FormGroup 时使用 DatePipe 格式化日期： https://stackblitz.com/edit/angular-3tp7yz?file=src%2Fapp%2Fapp.component.ts

Answer 3

您可以在订阅时转换日期格式，因为日期管道运算符在 formControlName 中不起作用。

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {

      this.userInfoModel$ = data as UserInfoModel;
var datePipe=new DatePipe("en-US");

this.userInfoModel$.dob=datePipe.transform(this.userInfoModel$.dob,'MM/dd/yyyy');

      this.userInfoForm.patchValue(this.userInfoModel$);
});


<input formControlName="dob" type="text" class="form-control" />

希望对你有帮助！

Answer 4

如果您想要不同的日期时间格式，请使用 momentjs

Momentjs 适用于所有 Angular 版本并提供不同类型的格式

首先像这样导入momentjs：

import * as moment from 'moment';

如果你想传递你自己的格式，你也可以像这样传递

sysdate = moment().format('MMMM Do YYYY, h:mm a');

以及下面的momentjs链接

momentjs

Answer 5

我最终为 formControlName 使用了第二个隐藏输入：

     <mat-form-field>
        <mat-label>Start Date</mat-label>
        <input type="text"
          #start
          matInput
          value="{{startDate | date: 'mediumDate'}}"
          autocomplete="off"
          placeholder="Start Date"
          attr.aria-label="Start Date"
          (keyup.enter)="changeDate(start.value, 'start')"
          (blur)="changeDate(start.value, 'start')">
      </mat-form-field>

      <input hidden formControlName="startDate">

Answer 6

这对我有用： 我使用此函数为带有转换日期的表单打补丁

fromJsonDate(jDate): string {
  const bDate: Date = new Date(jDate);
  return bDate.toISOString().substring(0, 10);  //Ignore time
}

在我使用的形式（反应形式）中：

<input type="date" formControlName="dob" class="form-control">  // No value

浏览器显示内置日期选择器并根据用户操作系统设置格式化日期。

然后将值发布（保存）到 web api 我再次使用转换：

toApiDate(bDate) {
  const apiDate: string = new Date(bDate).toUTCString();
  return apiDate;
}

我使用 toUTCString() 是因为我的用户可能与我的服务器不在同一个时区（实际上我不是）。