我是'angular2'和'angular js material'的新手。我在我的项目中使用material-datepicker。
这是我的日期选择器代码
<material-datepicker placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
它将在浏览器中显示,如下所示。
我担心的是日期格式问题。如何设置2017/04/27至2017年4月27日的日期格式。
答案 0 :(得分:1)
您可以使用dateFormat
选项指定MMMM DD YYYY
令牌,其中:
MMMM
是名称月DD
是该月的某一天YYYY
是年份如momentjs docs中所述。
您的代码如下:
<material-datepicker [dateFormat]="'MMMM DD YYYY'" placeholder="Select Date" [(date)]="currentDate" name="currentDate" required></material-datepicker>
答案 1 :(得分:0)
物料日期选择器正在使用时刻格式化日期,因此如果您只是提供当下接受的模式,您可以根据需要格式化日期。 [dateFormat]="'LL'"
答案 2 :(得分:0)
在md datepicker的角度2中,您可以更改日期格式,如下所示:
创建一个扩展NativeDateAdapter的组件:
import { Component, OnInit } from '@angular/core';
import { NativeDateAdapter } from '@angular/material';
export class DateAdapterComponent extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
let day = date.getDate();
let month = date.getMonth();
let year = date.getFullYear();
if (displayFormat == "input") {
return this._toString(month) + ' '+ this._to2digit(day) + ',' + year;
} else {
return this._toString(month) + ' ' + year;
}
}
private _to2digit(n: number) {
return ('00' + n).slice(-2);
}
private _toString(n: number) {
let month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return month[n];
}
}
在您的应用模块中添加日期格式常量:
const MY_DATE_FORMATS:MdDateFormats = {
parse: {
dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
},
display: {
dateInput: 'input',
monthYearLabel: {year: 'numeric', month: 'short'},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
}
};
并在提供程序中添加日期适配器和日期格式:
providers: [ {provide: DateAdapter, useClass: DateAdapterComponent},
{provide: MD_DATE_FORMATS, useValue: MY_DATE_FORMATS}],