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

Question

我正在使用 Angular 6 和响应式表单，我正在尝试弄清楚如何格式化从网络返回的日期值api。日期显示为 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

这对我有用：我使用此函数

对具有转换日期的表单进行修补

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

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

然后 post（保存）值到网络 api 我再次转换使用 :

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

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

Answer 2

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

Answer 3

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

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

首先像这样导入 momentjs:

从 'moment';

导入 * 作为时刻

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

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

和下面的 momentjs link

momentjs

Answer 4

您可以在订阅时转换日期格式，因为日期管道运算符在 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 5

使用日期选择器时遇到同样的问题。解决方案很简单：将输入类型更改为 "date"

之前：

<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 6

我最终为 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 7

以我为例 Angular 13.2 我在将日期字段绑定到表单时遇到了类似的问题。这可能是由于区域设置日期格式的差异造成的。在模型的 Json 数据中，我的日期格式为

yyyy-MM-ddThh:mm:ss

但是网络浏览器会像这样显示日期选择器字段

MM/dd/yyyy

经过多次探索，我发现这行得通：

<input type="date" #purchaseDate="ngModel" class="form-control" placeholder="yyyy-MM-dd" [ngModel]="vehicle.purchaseDate | date:'yyyy-MM-dd'" (ngModelChange)="vehicle.purchaseDate=$event" name="purchaseDate" >

所以，显示格式很奇怪，与我在 windows 中的区域设置不同，但字段 ID 绑定正确。

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

Angular 6 Date format MM/dd/yyyy in reactive form

date

angular

angular-reactive-forms