0

Estou utilizando o datepicker da ng-boostrap e estou encontrando dificuldade em formatar a data que vai para o input após o click no dia desejado:

inserir a descrição da imagem aqui

Gostaria que ficasse no formato: dd/mm/yyyy.

Segue HTML do input:

<input class="form-control form-control-sm" type="text" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()" [ngClass]="{ 'is-invalid': enviado && f.dt_inicial.errors?.required }" formControlName="dt_inicial">

Abaixo está como alterei a localidade padrão do Angular, bem como a importação do NgbModule:

import { registerLocaleData, DatePipe } from '@angular/common';
import localePt from '@angular/common/locales/pt';

registerLocaleData(localePt);

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

...

imports: [
    ...

    NgbModule
],
providers: [
    ...

    { provide: LOCALE_ID, useValue: 'pt' }
]
2
  • Como é que está o seu código, Html e Typescript se possível??
    – LeAndrade
    Commented 6/08/2019 às 13:47
  • LeAndrade, primeira obrigado por entrar em contato, alterei a pegunta com os códigos que envolvem o DatePicker.
    – Alessandro
    Commented 6/08/2019 às 21:33

2 Respostas 2

1

Adicione a localização ao Chronos

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

Na sequência use o datapicker pra essa localização

constructor(private localeService: BsLocaleService) {
   localeService.use('pt-br');
 }
1
  • Não existe importação possível para 'ngx-bootstrap/chronos'/'ngx-bootstrap/chronos', fiz uma alteração na pergunta onde também cito como estou importando o NgbModule.
    – Alessandro
    Commented 19/08/2019 às 21:15
0

Eu fiz assim usando o moment:

import {
  NgbDateParserFormatter,
  NgbDateStruct
} from '@ng-bootstrap/ng-bootstrap';
import * as moment from 'moment';
import { Injectable } from '@angular/core';
@Injectable()
export class NgbDateMomentParserFormatter extends NgbDateParserFormatter {
  private momentFormat = 'DD/MM/YYYY';
  constructor() {
    super();
  }
  format(date: NgbDateStruct): string {
    if (date === null) {
      return '';
    }
    let d = moment({ year: date.year, month: date.month - 1, date: date.day });
    return d.isValid() ? d.format(this.momentFormat) : '';
  }

  parse(value: string): NgbDateStruct {
    if (!value) {
      return null;
    }
    let d = moment(value, this.momentFormat);
    return d.isValid()
      ? { year: d.year(), month: d.month() + 1, day: d.date() }
      : null;
  }
}

No seu modulo:

  providers: [
    {
      provide: NgbDateParserFormatter,
      useClass: NgbDateMomentParserFormatter
    }
  ]

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .