如何将npx bootstrap datepicker语言更改为pt-br?

时间:2018-03-07 18:04:23

标签: angular typescript datepicker components ngx-bootstrap

我正在Angular 4中做一个项目,我安装了ngx bootstrap,日期选择器是英文的。我在app.module.ts中插入了以下行:

import { defineLocale } from 'ngx-bootstrap/chronos';
import { ptBrLocale } from 'ngx-bootstrap/locale';
defineLocale('pt-br', ptBrLocale); 

然后我进入了我正在调用我的日期选择器的页面组件,我进行了导入并且我声明了:

import { Component, OnInit } from '@angular/core';
import { BsDatepickerConfig, BsLocaleService } from 'ngx-bootstrap/datepicker';
import { listLocales } from 'ngx-bootstrap/chronos';

@Component({
  selector: 'demo-datepicker-change-locale',
  templateUrl: './cancelar-agendamentos-consulta.component.html'
})
export class DemoDatepickerChangeLocaleComponent {
  locale = 'pt-br';
  locales = listLocales();

  constructor(private _localeService: BsLocaleService) {
  }

  applyLocale(pop: any) {
    this._localeService.use(this.locale);
    pop.hide();
    pop.show();
  }
}

它仍然无效。我做错了什么?

2 个答案:

答案 0 :(得分:3)

您的代码的问题在于您将调用更改为另一个函数中的区域设置而您没有调用它。

尝试删除applyLocale函数并调用以更改构造函数中的语言环境,如下所示:

@Component({
 selector: 'demo-datepicker-change-locale',
 templateUrl: './cancelar-agendamentos-consulta.component.html'
})
export class DemoDatepickerChangeLocaleComponent {
  locale = 'pt-br';
  locales = listLocales();

  constructor(private _localeService: BsLocaleService) {
    this._localeService.use(this.locale);
  }
}

答案 1 :(得分:1)

所以我希望该语言为意大利语,并使用以下代码更改了语言:

我导入了:

import { BsLocaleService, defineLocale, itLocale } from 'ngx-bootstrap';

example.component.ts中的代码

  // set language of datepicker
  setDatepickerLanguage() {
    defineLocale('it', itLocale);
    this.localeService.use('it');
  }

并在Constructor()上调用了函数 而且有效。

屏幕截图:

screenshot