How do I change the npx bootstrap datepicker language to pt-br?

Question

I am doing a project in Angular 4, I installed the ngx bootstrap and the date picker is in English. I inserted the following lines in app.module.ts:

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

Then I went into the component of the page where I'm calling my datepicker, I made the imports and I declared:

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

and

@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();
  }
}

And it still did not work. What am I doing wrong?

Answer 1

The problem with your code is that you put the call to change the locale inside another function and you are not calling it.

Try removing the applyLocale function and putting the call to change the locale inside the constructor like this:

@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);
  }
}