Configure ng-bootstrap DatePicker for PT-Br

Question

Configure ng-bootstrap DatePicker for PT-Br

Navigation

#1 by (8 votes)

4

I'm using a Ng-Bootstrap DatePicker with Angular 2 and I want to put the date format (YYYY / MM / DD) into the format (DD / MM / YYYY)

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

Any ideas how to do this?

angular bootstrap bootstrap-datepicker

asked by anonymous 27.10.2017 / 18:07

1 answer

Column 'XXX' in field list is ambiguous Optimistic Lock; Why not throw an exception?

score 8 · Accepted Answer

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', 'sab', 'dom'],
        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 provider 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}],
            ],
        })