我已成功将我的素材日期选择器格式从MM / DD / YY更改为DD / MM / YY。
我是通过使用此语法
扩展我的本机日期适配器来实现的export class AppDateAdapter extends NativeDateAdapter {
getFirstDayOfWeek(): number {
return 1;
}
parse(value: any): Date | null {
if ((typeof value === "string") && (value.indexOf("/") > -1)) {
const str = value.split("/");
const year = Number(str[2]);
const month = Number(str[1]) - 1;
const date = Number(str[0]);
return new Date(year, month, date);
}
const timestamp = typeof value === "number" ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
}
format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {
let day = date.getDate();
let month = date.getMonth() + 1;
let year = date.getFullYear();
return this._to2digit(day) + "/" + this._to2digit(month) + "/" + year;
} else {
return date.toDateString();
}
}
private _to2digit(n: number) {
return ("00" + n).slice(-2);
}
}
export const APP_DATE_FORMATS = {
parse: {
dateInput: { month: "short", year: "numeric", day: "numeric" }
},
display: {
dateInput: "input",
monthYearLabel: { month: "short", year: "numeric", day: "numeric" },
dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
monthYearA11yLabel: { year: "numeric", month: "long" }
}
}
app.module.ts:
// material datepicker
{
provide: MAT_DATE_LOCALE, useValue: "nl-be"
},
{
provide: DateAdapter, useClass: AppDateAdapter
},
{
provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS
}
然而,我也更改了我的按钮的内容(更改月份)。 它看起来像这样:
无论如何我可以改变tis按钮来显示" 11月。 2017"
答案 0 :(得分:0)
对于此标签,monthYearLabel
格式负责。您正在处理displayFormat'输入'。其他人只返回date.toDateString()
。
我这样做是为了处理这个标签。
export const APP_DATE_FORMATS = {
parse: {
dateInput: {month: 'short', year: 'numeric', day: 'numeric'},
},
display: {
dateInput: 'input',
monthYearLabel: {year: 'numeric', month: 'short', order: ['month', ' ', 'year']},
dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
monthYearA11yLabel: {year: 'numeric', month: 'long'},
}
};
const APP_DATE_MONTH_FORMAT = [{
short: 'Jan',
long: 'Januar'
}, {
short: 'Feb',
long: 'Februar'
}, {
short: 'Mär',
long: 'März'
}, {
short: 'Apr',
long: 'April'
}, {
short: 'Mai',
long: 'Mai'
}, {
short: 'Jun',
long: 'Juni'
}, {
short: 'Jul',
long: 'July'
}, {
short: 'Aug',
long: 'August'
}, {
short: 'Sep',
long: 'September'
}, {
short: 'Okt',
long: 'Oktober'
}, {
short: 'Nov',
long: 'November'
}, {
short: 'Dez',
long: 'Dezember'
}];
class DateTargets {
day?: string | number;
month?: string | number;
year?: number;
build(order?: Array<string>): string {
const targets = [];
if (order) {
order.forEach((target) => {
targets.push(this[target] ? this[target] : target);
});
return targets.join('');
} else {
if (this.day) targets.push(this.day);
if (this.month) targets.push(this.month);
if (this.year) targets.push(this.year);
return targets.join('.');
}
}
}
export class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${day.pad()}.${month.pad()}.${year}`;
} else {
const targets = new DateTargets();
if (displayFormat['day'] === 'numeric') {
targets.day = date.getDate();
}
if (displayFormat['month'] === 'numeric') {
targets.month = date.getMonth() + 1;
} else if (displayFormat['month'] === 'short') {
targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].short;
} else if (displayFormat['month'] === 'long') {
targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].long;
}
if (displayFormat['year'] === 'numeric') {
targets.year = date.getFullYear();
}
return targets.build(displayFormat['order']);
}
}
}