问题描述
当用户使用 mat Datepicker 选择日期时,我想以 dd/MM/YYYY 格式显示日期,但是当我在 Datepicker 中使用 Datepipe 时,它在我们选择时不显示任何日期
I want to display a date in dd/MM/YYYY format when a user pick the date using the mat Datepicker but when i use the Datepipe in Datepicker it not shows any Date when we pick
<mat-form-field class="box">
<input matInput [matDatepicker]="picker" placeholder="Generate Date" maxlength="10px" [readonly]="isNew1"
[ngModel]="quotation?.generateDate | date: 'dd/MM/yy'"
(ngModelChange)="quotation.generateDate=$event" [ngModelOptions]="{standalone: true}">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [disabled]="isNew1" #picker></mat-datepicker>
</mat-form-field>
推荐答案
确保您已在 .ts 中导入 DatePipe
Make sure you have imported DatePipe in your .ts
import { DatePipe } from '@angular/common';
constructor(private date: DatePipe)
注意:如果你有静态注入Datepipe的错误,那么请在你的module.ts文件中导入DatePipe
Note: If you have an error of static injection Datepipe then please import DatePipe in your module.ts file
如果这不能解决您的问题,那么您可以使用日期选择功能将您的日期转换为您喜欢的格式,如下所示:
If this is not fixing your issue then you can make function on date selection that transform your date to your preferred format just like below:
<mat-form-field class="box">
<input matInput [matDatepicker]="picker"
placeholder="Generate Date"
maxlength="10px"
[readonly]="isNew1"
[ngModel]="quotation?.generateDate"
(ngModelChange)="onDateSelection(quotation?.generateDate)"
[ngModelOptions]="{standalone: true}"
>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [disabled]="isNew1" #picker></mat-datepicker>
</mat-form-field>
现在在您的 .ts 文件中:
Now in your .ts file:
import { DatePipe } from '@angular/common';
export class XComponent{
constructor(private date: DatePipe)
onDateSelection(date: Date): string {
return this.date.transform(date, 'yyyy-MM-dd');
}
}
以下是可用的角度日期管道格式:https://angular.io/api/common/日期管道
Here are the available angular date pipe formats: https://angular.io/api/common/DatePipe
这篇关于日期管道在 Html 插值中工作正常,但在 Mat-DatePicker 输入字段中不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!