如何更改角形材料日期选择器中的日期格式? [英] How can I change date format in angular material datepicker?
问题描述
我想将默认日期格式(YYYY-MM-DD)更改为其他格式,例如(MM-DD-YYYY).
I want to change the default date format (YYYY-MM-DD) to some other format like (MM-DD-YYYY).
这是我的日历HTML结构.
This is my calendar HTML structure.
<mat-form-field class="full-width">
<input matInput [matDatepicker]="picker"
[(ngModel)]="currentDay"
(dateChange)="currentDayChanged()"
required
placeholder="date"
name="currentDay">
<mat-datepicker-toggle matSuffix
[for]="picker">
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
推荐答案
有一个关于它的博客: https://blog.angular.io/taking-角材料的日期选择器的优点237e80fa14b3
There is a blog about it: https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
(如果URL无效), 例如,假设您已经在整个应用程序中使用 Moment.js ,则可以创建MomentDateAdapter:
(in case the URL becomes invalid), For example, say you’re already using Moment.js throughout your app, you can create a MomentDateAdapter:
继承一个类
class MomentDateAdapter extends DateAdapter<Moment> {
parse(value: any, parseFormat: any): Moment {
return moment(value, parseFormat);
}
// Implementation for remaining abstract methods of DateAdapter.
}
创建一个这样的常量,例如在单独的打字稿文件中:
Create a const like this, f.e. in a separate typescript file:
const MOMENT_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
monthYearLabel: 'MMM YYYY',
// See DateFormats for other required formats.
},
};
最后在您的应用程序模块中同时提供这两项功能
finally provide both of these things in your application module
@NgModule({
imports: [MdDatepickerModule, ...],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter},
{provide: MD_DATE_FORMATS, useValue: MOMENT_FORMATS},
],
})
class AppModule {}
如果您让我们知道您的结果,我将不胜感激.
I appreciate if you let us know your results.
这篇关于如何更改角形材料日期选择器中的日期格式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!