![](/img/trans.png)
[英]Angular Material 2 - Change datepicker date format (on button)
[英]How can I change date format in angular material datepicker?
我想将默认日期格式(YYYY-MM-DD)更改为其他格式,例如(MM-DD-YYYY)。
这是我的日历HTML结构。
<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-advantage-of-the-angular-material-datepicker-237e80fa14b3
(以防URL无效),例如,假设您已经在整个应用程序中使用Moment.js ,则可以创建MomentDateAdapter:
继承一个类
class MomentDateAdapter extends DateAdapter<Moment> {
parse(value: any, parseFormat: any): Moment {
return moment(value, parseFormat);
}
// Implementation for remaining abstract methods of DateAdapter.
}
在单独的打字稿文件中创建一个这样的const fe:
const MOMENT_FORMATS = {
parse: {
dateInput: 'LL',
},
display: {
monthYearLabel: 'MMM YYYY',
// See DateFormats for other required formats.
},
};
最后在您的应用程序模块中同时提供这两个东西
@NgModule({
imports: [MdDatepickerModule, ...],
providers: [
{provide: DateAdapter, useClass: MomentDateAdapter},
{provide: MD_DATE_FORMATS, useValue: MOMENT_FORMATS},
],
})
class AppModule {}
如果您让我们知道您的结果,我们将不胜感激。
在AppModule中设置您的语言环境!
以巴西为例,
import { LOCALE_ID } from '@angular/core'; import localePt from '@angular/common/locales/pt'; registerLocaleData(localePt, 'pt-BR'); @NgModule({ declarations: [ AppComponent ], imports: [], providers: [ { provide: LOCALE_ID, useValue: 'pt-BR' } ], bootstrap: [AppComponent] }) export class AppModule { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.