日期选择器的国际化

Daw*_*ruk 6 localization datepicker ng-bootstrap angular angular5

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

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

它应该使用默认设置,即:

共享-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);
    }
}
Run Code Online (Sandbox Code Playgroud)

用法

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

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

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

或者

https://github.com/NativeScript/nativescript-angular/issues/1147 - 我在这里复制了语言环境文件

你有什么想法可能是错的吗?

更新

我最终是这样解决的:

日期选择器-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);
    }
}
Run Code Online (Sandbox Code Playgroud)

共享-common.module.ts

{ provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }
Run Code Online (Sandbox Code Playgroud)

会为我做这项工作,但任何改进建议表示赞赏。

小智 0

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