In my project i use ng-bootstrap datePicker. My datePicker widget is very simple: DEMO.

But i need internationalize his (needed set russian language). Please help me.

js:

import {Component} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [``]
})
export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered = (date: NgbDate) => this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  isInside = (date: NgbDate) => date.after(this.fromDate) && date.before(this.toDate);
  isRange = (date: NgbDate) => date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date)
}

In my project i use ng-bootstrap datePicker. My datePicker widget is very simple: DEMO.

But i need internationalize his (needed set russian language). Please help me.

js:

import {Component} from '@angular/core';
import {NgbDate, NgbCalendar} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [``]
})
export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered = (date: NgbDate) => this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  isInside = (date: NgbDate) => date.after(this.fromDate) && date.before(this.toDate);
  isRange = (date: NgbDate) => date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date)
}

• javascript
• angular
• typescript
• datepicker

• 1 in the page you linked they speak about internationalization, you need to scroll to 2/3 of the page. And here the demo they link to it – jonatjano Commented Aug 22, 2018 at 12:48
• @jonatjano but it another code structure – rettoryh13 Commented Aug 22, 2018 at 13:48

2 Answers 2

You can simply use:

import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from "@angular/mon";
import localeRo from "@angular/mon/locales/ro";
import localeRoExtra from "@angular/mon/locales/extra/ro";

registerLocaleData(localeRo, "ro", localeRoExtra);

and then use the provider in the @NgModule decorator:

providers: [{ provide: LOCALE_ID, useValue: "ro-RO"}]

There is no need for NgbDatepickerI18n!
A working example for German language in Angular for ngbdatepicker is on stackblitz: https://stackblitz./edit/angular-mezpyn-b6tm1r?file=app%2Fdatepicker-popup.module.ts

Ok here the solution : https://stackblitz./edit/angular-dd3vve?file=app/datepicker-range.ts

what I changed (using this demo as example):

// now class extend NgbDatepickerI18n
export class NgbdDatepickerRange extends NgbDatepickerI18n {

.

// call to super() in constructor
constructor(calendar: NgbCalendar) {
  super()

.

// implement the abstract methods
getWeekdayShortName(weekday: number): string {return "td"};
getMonthShortName(month: number): string {return "mt"};
getMonthFullName(month: number): string {return "month"};
getDayAriaLabel(date: NgbDateStruct): string {return "e"};

.

// provide in ponent
@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  providers: [{provide: NgbDatepickerI18n, useClass: NgbdDatepickerRange}],

you'll need to change the method to return usable values