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

Question

我想更改Reactive表单中某个字段的默认日期格式。它以以下格式出现：；1999年3月16日"；但我想改变以下格式"；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。

任何有关这方面的建议都会有所帮助。提前谢谢。

Answer 1

您可以使用角度材质。它有这种格式(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());
}

堆叠式演示

Answer 2

ng-bootstrap提供一个ngb-datepicker组件。您可以使用它来代替输入。以下是官方文档中关于如何格式化此组件的日期的示例：自定义日期格式化程序。

格式化程序本身的代码：

@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 : '';
}
}