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设置为date值的确可以使它看起来不错，但我不想使用内置的浏览器日期显示，因此需要将其转换为字符串。

谢谢。

Answer 1

使用日期选择器时出现了同样的问题。解决方案很简单：将输入类型更改为“日期”

之前：

<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

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

Momentjs在所有版本上都能正常工作，并提供不同类型的格式

像这样首先导入momentjs：

从*时刻开始*导入；

如果您想传递自己的格式，也可以像

sysdate = moment（）。format（'MMMM Do YYYY，h：mm a'）;

和下面的momentjs链接

momentjs

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

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

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（）是因为我的用户可能与我的服务器不在同一时区（实际上我不在）。

角6日期格式为MM / dd / yyyy

6 个答案: