如何更改响应式表单中日期的格式？

Posted 2023-03-21

【中文标题】如何更改响应式表单中日期的格式？

【英文标题】：How to change the format of Date in Reactive Forms?

【发布时间】：2021-09-05 03:59:09

【问题描述】：

我想更改我在响应式表单中的一个字段中的默认日期格式。它以以下格式显示“16-03-1999”，但我想更改为以下格式“1999 年 3 月 16 日”。

下面是相同的代码：

输入脚本文件：

this.companyForms = this.fb.group(

)

我正在使用 API 的响应在表单中动态添加控件

this.companyForms.addControl("EFFECTIVE_DATE", new FormGroup(
        'DEFAULT VALUE': new FormControl(null)
))

在html文件中，

<form [formGroup]="companyForms">
   <div class="row pt-2" formGroupName="EFFECTIVE_DATE">
      <input type="date" class="form-control bg-light" name="DEFAULT VALUE" formControlName="DEFAULT VALUE" [value]="companyForms.get(['EFFECTIVE_DATE','DEFAULT VALUE'])| date:'longDate' ">
   </div>
</form>

我正在尝试使用内置管道 longDate 更改日期格式，该管道基本上用于将日期格式转换为所需格式。但在应用管道后，它也以相同的格式“dd-mm-yyyy”出现。我想要“mmmm dd, yyyy”（2019 年 6 月 26 日）格式。

日期字段仍然在占位符中显示默认格式，即 dd-mm-yyyy。

有关此的任何建议都会有所帮助。提前致谢。

【参考方案1】：

您可以使用 Angular 材质。它具有这种格式（2019 年 6 月 26 日） html

<mat-form-field appearance="fill">
  <mat-label>datepicker</mat-label>
  <input matInput [matDatepicker]="dp" [formControl]="date">
  <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
  <mat-datepicker #dp></mat-datepicker>
</mat-form-field>

ts

import Component from '@angular/core';
import FormControl, FormGroup from '@angular/forms';
import MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS from '@angular/material-moment-adapter';
import DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE from '@angular/material/core';
import * as _moment from 'moment';
import default as _rollupMoment from 'moment';

const moment = _rollupMoment || _moment;
export const MY_FORMATS = 
  parse: 
    dateInput: 'LL',
  ,
  display: 
    dateInput: 'LL',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  ,
;
@Component(
  selector: 'datepicker-formats-example',
  templateUrl: 'datepicker-formats-example.html',
  providers: [
    
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    ,
    provide: MAT_DATE_FORMATS, useValue: MY_FORMATS,
  ],
)
export class DatepickerFormatsExample 
  date = new FormControl(moment());

stackblitz中的演示

【讨论】：

感谢您的回复，有什么方法可以使用 bootstrap 和 angular，就像我们在应用程序中使用的一样？如果角度材料中有一个字段，则 UI 会熄灭。任何有关相同的建议都会非常有帮助。

ng-bootstrap 比 angular 更接近 bootstrap:ng-bootstrap.github.io/#/home

【参考方案2】：

ng-bootstrap 提供一个ngb-datepicker 组件。您可以使用它代替输入。以下是官方文档中有关如何格式化此组件的日期的示例：custom date formatter。

格式化程序本身的代码：

@Injectable()
export class CustomDateParserFormatter extends NgbDateParserFormatter 

  readonly DELIMITER = '/';

  parse(value: string): NgbDateStruct | null 
    if (value) 
      let date = value.split(this.DELIMITER);
      return 
        day : parseInt(date[0], 10),
        month : parseInt(date[1], 10),
        year : parseInt(date[2], 10)
      ;
    
    return null;
  

  format(date: NgbDateStruct | null): string 
    return date ? date.day + this.DELIMITER + date.month + this.DELIMITER + date.year : '';
  

【讨论】：

感谢您的回复，我之前也尝试过此代码，但它没有以长日期格式显示输出，我想要这种格式的日期（2021 年 3 月 16 日）

要存档，您只需更改 format 和 parse 函数以适应此日期格式