Javascript 更改 Material Angular 4 Datepicker 的语言
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45726463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change language of Datepicker of Material Angular 4
提问by Melchia
How to Change language of Datepicker of Material Angular? I can't find in documentation for Angular material 2. Here is a plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview
如何更改 Material Angular 的 Datepicker 的语言？我在 Angular 材料 2 的文档中找不到。这是一个 plunkr https://plnkr.co/edit/unzlijtsHf3CPW4oL7bl?p=preview
<md-input-container>
<input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
<button mdSuffix [mdDatepickerToggle]="picker"></button>
</md-input-container>
<md-datepicker #picker></md-datepicker>
采纳答案by Sisky
Sorry this should be a comment but I don't have the minimum reputation required.
抱歉，这应该是评论，但我没有所需的最低声誉。
Here is a good blog post on DatePicker including using it with moment.js as @Gregor Doroschenko mentioned in the above comment.
这是关于 DatePicker 的一篇很好的博客文章，包括将它与 moment.js 一起使用，如上述评论中提到的@Gregor Doroschenko。
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
https://blog.angular.io/taking-advantage-of-the-angular-material-datepicker-237e80fa14b3
回答by vladernn
import {MAT_DATE_LOCALE} from '@angular/material';
&
&
providers: [{ provide: MAT_DATE_LOCALE, useValue: 'es-ES' }]
Do this in tpv.modules.ts
在 tpv.modules.ts 中执行此操作
回答by Nehal
md-datepicker provides setLocalemethod which can be used to set any language (list of locale).
md-datepicker 提供了setLocale可用于设置任何语言（语言环境列表）的方法。
Here's an example of setting locale to 'fr':
这是将语言环境设置为“fr”的示例：
export class DatepickerOverviewExample {
constructor(private dateAdapter: DateAdapter<Date>) {
this.dateAdapter.setLocale('fr');
}
}
One thing to keep in mind, md-datepicker's default date parsing format is mm/dd/yyyy, so if a locale has a different date format (for 'fr' its dd/mm/yyyy), we will need to define a class that extends NativeDateAdapterto parse the new date format. Without setting the proper date format, there will be an issue like this question.
要记住的一件事是，md-datepicker 的默认日期解析格式是mm/dd/yyyy，因此如果语言环境具有不同的日期格式（对于 'fr' its dd/mm/yyyy），我们将需要定义一个扩展NativeDateAdapter来解析新日期格式的类。如果没有设置正确的日期格式，就会出现这样的问题。
import { NativeDateAdapter, DateAdapter, MD_DATE_FORMATS } from "@angular/material";
export class FrenchDateAdapter extends NativeDateAdapter {
parse(value: any): Date | null {
if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
const str = value.split('/');
if (str.length < 2 || isNaN(+str[0]) || isNaN(+str[1]) || isNaN(+str[2])) {
return null;
}
return new Date(Number(str[2]), Number(str[1]) - 1, Number(str[0]), 12);
}
const timestamp = typeof value === 'number' ? value : Date.parse(value);
return isNaN(timestamp) ? null : new Date(timestamp);
}
}
@Component({
...
providers: [{provide: DateAdapter, useClass: FrenchDateAdapter}],
})
回答by user147677
Locale setting can be provided via MAT_DATE_LOCALE constant, but to change language dynamically you need to use DateAdapter as it is shown in https://material.angular.io/components/datepicker/overview#internationalization
区域设置可以通过 MAT_DATE_LOCALE 常量提供，但要动态更改语言，您需要使用 DateAdapter，如https://material.angular.io/components/datepicker/overview#internationalization 中所示
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private dateAdapter: DateAdapter<any>) {}
setFrench() {
// Set language of Datepicker
this.dateAdapter.setLocale('fr');
}
}
Here is another example when you need to configure locale from external script:
这是需要从外部脚本配置语言环境时的另一个示例：
<script>
window.appConfig = {
language: 'fr',
// Other config options
// ...
};
<script>
<app-root></app-root>
In this case you should also use DateAdapter:
在这种情况下，您还应该使用 DateAdapter：
import {Injectable} from '@angular/core';
import {DateAdapter} from '@angular/material';
declare let window: any;
@Injectable()
export class AppConfigService {
appConfig = window.appConfig;
constructor(private dateAdapter: DateAdapter<any>) {
// Set language of Datepicker
this.dateAdapter.setLocale(this.appConfig.language);
}
}
回答by Emerica
For anyone who has a bug when editing input field (eg: putting DD/MM/YYYY will change it to MM/DD/YYYY or simply not working) create an adapter:
对于在编辑输入字段时遇到错误的任何人（例如：放置 DD/MM/YYYY 会将其更改为 MM/DD/YYYY 或根本不起作用）创建一个适配器：
import { NativeDateAdapter } from '@angular/material';
export class FrenchDateProvider extends NativeDateAdapter {
parse(value: string) {
let it = value.split('/');
if (it.length == 3) {
return new Date(+it[2], +it[1] - 1, +it[0], 12);
}
}
format(date: Date, displayFormat: Object) {
return ('0' + date.getDate()).slice(-2) + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + date.getFullYear();
}
}
Add it to your module as provider:
将其作为提供者添加到您的模块中：
@NgModule({
providers: [
{ provide: DateAdapter, useClass: FrenchDateProvider }
]
})
export class SharedModule { }
