角素材2,更改datepicker日期格式"MM/DD/YYYY";到"DD/MM/YYYY";奇怪的行为 [英] angular material 2, change datepicker Date Format "MM/DD/YYYY" to "DD/MM/YYYY" strange behavior
问题描述
我只是尝试将角材料2日期选择器的默认日期格式 MM/DD/YYYY 更改为 DD/MM/YYYY 或 DD.MM .YYYY 或至少 DD-MM-YYYY
I just tried to change the angular material 2 date-picker default Date Format MM/DD/YYYY to DD/MM/YYYY or DD.MM.YYYY or at least DD-MM-YYYY
providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]
因此尝试了以下方法
方法 1个朋克:进入 DD-MM-YYYY 格式
方法 2 plunkr :进入 DD.MM.YYYY 格式
方法 3个插件:进入 DD/MM/YYYY 格式
但是上述每种方法都可以正常使用,直到我选择一个日期 1到12,
but each of above approach working ordinary until I select a Date 1 to 12,
例如:今天是 2017年9月25日,如果我选择 2017年9月12日作为日期,则再次单击日期选择器按钮,我可以看到日历日期,即2017年11月9日(09/11/2017)不是(11/09/2017),这似乎是默认日期格式无法正确覆盖
for ex: Today date is 25th September 2017, if I select 12th September 2017 as date, then once click datepicker button again I can see calender date, taken as 09th of November 2017(09/11/2017) not as (11/09/2017) , which is seems default date format not override correctly
推荐答案
1/ DOCS: By cusomising the parse and display format with a custom date atapter
在自定义日期适配器(您是AppDateAdapter)中,添加解析方法以将新的日期格式(DD/MM/YYY)解析为日期有效日期:
In the custom Date Adapter (yours is AppDateAdapter), add a parse method to parse the new date format (DD/MM/YYY) to a date valid date:
例如对于 DD/MM/YYYY 格式,解析可以是:
for example for the DD/MM/YYYY format, parse could be:
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);
}
正在工作的stackblitz: https ://stackblitz.com/edit/angular-material-datepicker-format?embed = 1& file = app/date.adapter.ts
working stackblitz: https://stackblitz.com/edit/angular-material-datepicker-format?embed=1&file=app/date.adapter.ts
您的完整日期适配器:
export class AppDateAdapter extends NativeDateAdapter {
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: any): 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);
}
}
此方法的优点是您还可以在显示常量中自定义monthYearLabel
的格式,并且可以具有一个类似于以下内容的日历:
The advantage of this approach is you could also custom the format of monthYearLabel
in the display constants and could have a calendar which looks like:
这篇关于角素材2,更改datepicker日期格式"MM/DD/YYYY";到"DD/MM/YYYY";奇怪的行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!