日期选择器的国际化

Posted

技术标签:

【中文标题】日期选择器的国际化【英文标题】:Internationalization of datepickers 【发布时间】:2018-11-26 18:06:36 【问题描述】:

我尝试强制 jHipster 生成的 Angular 5 项目中的 datepicker 使用波兰语语言环境,一周和几个月。据我了解有关文档:

https://ng-bootstrap.github.io/#/components/datepicker/examples#i18n

它应该使用默认设置,它们是:

shared-common.module.ts

...
import  registerLocaleData  from '@angular/common';
import locale from '@angular/common/locales/pl';
...

providers: [
    ...
    
        provide: LOCALE_ID,
        useValue: 'pl'
    ,
],
...
export class TestSharedCommonModule 
    constructor() 
        registerLocaleData(locale);
    

用法

<input id="field_testDate" type="text" class="form-control" name="testDate" 
ngbDatepicker  #testDateDp="ngbDatepicker" [(ngModel)]="tester.testDate"
            required/>

不幸的是它不起作用,我也尝试了不同的方法,例如:

https://angular.io/api/core/LOCALE_ID

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我复制语言环境文件的位置

你有什么想法吗?

更新

我终于这样解决了:

datepicker-i18n.ts

import  Inject, Injectable, LOCALE_ID  from '@angular/core';
import  NgbDatepickerI18n  from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = 
    en: 
        weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
        months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    ,
    pl: 
        weekdays: ['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'N'],
        months: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
    
;

@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n 

    constructor(@Inject(LOCALE_ID) private locale: string) 
        super();
    

    getWeekdayShortName(weekday: number): string 
        return I18N_VALUES[this.locale].weekdays[weekday - 1];
    
    getMonthShortName(month: number): string 
        return I18N_VALUES[this.locale].months[month - 1];
    
    getMonthFullName(month: number): string 
        return this.getMonthShortName(month);
    

shared-common.module.ts

 provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n 

将为我完成这项工作,但欢迎提出任何改进建议。

【问题讨论】:

【参考方案1】:

我不使用 datepicker,但在 ngx-translate 中,我遇到了同样的问题。 在app.module.ts,我添加:import localEn from '@angular/common/locales/en'; registerLocaleData(localEn);

【讨论】:

我也尝试过,在 app.module 中注册语言环境,但这并不能解决问题,但谢谢。【参考方案2】:

除了注册注册本地你还应该设置它

这为我解决了问题https://angular.io/api/core/LOCALE_ID

providers: [
 provide: LOCALE_ID, useValue: 'he-IL' 
]

在 app.module.ts 文件中。

【讨论】:

以上是关于日期选择器的国际化的主要内容,如果未能解决你的问题,请参考以下文章

根据下拉值设置 2 个日期选择器的最小日期和最大日期

如何更改 WPF 日期选择器的图标?

vuejs在选择后获取日期选择器的值

如何更改日期范围选择器的日期格式?

引导日期选择器的问题

layui中怎么在查询中获取日期选择器的值然后重载表格并加载选择的日期到表头