Configure ng-bootstrap Datepicker for EN

Question

I’m wearing a Datepicker from Ng-Bootstrap with Angular 2 and I want to set the date format (YYYY/MM/DD) to the format (DD/MM/YYYY)

I also need to change the calendar days and months to Portuguese.

Any idea how to do that?

Answer 1

Well I managed to create two files:Customdatepickeri18n

import { Component, Injectable } from '@angular/core';
import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';

const I18N_VALUES = {
    'pt-br': {
        weekdays: ['dom', 'seg', 'ter', 'qua', 'qui', 'sex', 'sab'],
        months: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
    },
};

@Injectable()
export class I18n {
    language = 'pt-br';
}

@Injectable()
export class CustomDatepickerI18n extends NgbDatepickerI18n {
    constructor(private _i18n: I18n) {
        super();
    }

    getWeekdayShortName(weekday: number): string {
        return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
    }

    getMonthShortName(month: number): string {
        return I18N_VALUES[this._i18n.language].months[month - 1];
    }

    getMonthFullName(month: number): string {
        return this.getMonthShortName(month);
    }
}

The second file: Ngbdateptparserformatter

import { Injectable } from '@angular/core';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';

function padNumber(value: number) {
    if (isNumber(value)) {
        return `0${value}`.slice(-2);
    } else {
        return '';
    }
}

function isNumber(value: any): boolean {
    return !isNaN(toInteger(value));
}

function toInteger(value: any): number {
    return parseInt(`${value}`, 10);
}

@Injectable()
export class NgbDatePTParserFormatter extends NgbDateParserFormatter {
    parse(value: string): NgbDateStruct {
        if (value) {
            const dateParts = value.trim().split('/');
            if (dateParts.length === 1 && isNumber(dateParts[0])) {
                return {year: toInteger(dateParts[0]), month: null, day: null};
            } else if (dateParts.length === 2 && isNumber(dateParts[0])
                && isNumber(dateParts[1])) {
                return {year: toInteger(dateParts[1]), month: toInteger(dateParts[0]), day: null};
            } else if (dateParts.length === 3 && isNumber(dateParts[0])
                && isNumber(dateParts[1]) && isNumber(dateParts[2])) {
                return {year: toInteger(dateParts[2]), month: toInteger(dateParts[1]), day: toInteger(dateParts[0])};
            }
        }
        return null;
    }

    format(date: NgbDateStruct): string {
        let stringDate: string = '';
        if (date) {
            stringDate += isNumber(date.day) ? padNumber(date.day) + '/' : '';
            stringDate += isNumber(date.month) ? padNumber(date.month) + '/' : '';
            stringDate += date.year;
        }
        return stringDate;
    }
}

Then just inform them as a preview in your module:

    import { NgbDatepickerConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
    import { NgbDatePTParserFormatter } from './_services/NgbDatePTParserFormatter';
    import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
    import { CustomDatepickerI18n, I18n } from '../_services/CustomDatepickerI18n';

        @NgModule({    
        providers: [
                PacienteService,
                [I18n, { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n }],
                [{provide: NgbDateParserFormatter, useClass: NgbDatePTParserFormatter}],
            ],
        })

Answer 2

In version 8.3.15 of Angular CLI, I imported in app.module.ts:

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

registerLocaleData(localePt);

And I inserted the code below inside the providers of the same file:

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [{ provide: LOCALE_ID, useValue: 'pt'}],
  bootstrap: [...]
})

Answer 3

The new version requires implementing the method below, follows adjustment to leave functional.

getDayAriaLabel(date: import('@ng-bootstrap/ng-bootstrap').NgbDateStruct): string {
 return date.day.toString();
}