CODEWITHSUNDEEP
angulardatepickerinternationalizationng-bootstrap
Neyt
Neyt

Reputation: 490

Use a ng-bootstrap internationalized datepicker in an input

I want to have a french datepicker in an input form.

Here is the ng-bootstrap example to have an "english" one:

<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
      <button class="input-group-addon" (click)="d.toggle()" type="button">
        <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
      </button>
    </div>
  </div>
</form>

Here they explained how to make a french one using <ngbd-datepicker-i18n></ngbd-datepicker-i18n> with a custom datepicker and here there is some more details on how to use it.

But what I want is to use the same thing that they used above, whith the template reference variable #d="ngbDatepicker" inside my input tag. Something like #d="myCustomNgbDatepicker".

Is it possible ? And if yes, how ?

Upvotes: 1

Views: 5639

Answers (3)

Jimmy Salazar
Jimmy Salazar

Reputation: 109

Added to what Menna Ramadan says in the ngbDatePicker documentation is the link to a demo that has the same structure:

https://ng-bootstrap.github.io/stackblitzes/datepicker/i18n/stackblitz.html

Here's what your service should be like (in my case for Spanish)

custom-datepicker-i18n.service.ts

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

const I18N_VALUES = {
  'es': {
    weekdays: ['L', 'M', 'M', 'J', 'V', 'S', 'D'],
    months: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
  }
  // other languages you would support
};

// Define a service holding the language. You probably already have one if your app is i18ned. Or you could also
// use the Angular LOCALE_ID value
@Injectable()
export class I18n {
  language = 'es';
}

@Injectable()
export class CustomDatepickerI18nService 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);
  }

  getDayAriaLabel(date: NgbDateStruct): string {
    return `${date.day}-${date.month}-${date.year}`;
  }
}

Then you provide the service in the component that uses the ngbdatepicker

my-component.ts

import { Component, OnInit } from '@angular/core';

import { NgbDatepickerI18n } from '@ng-bootstrap/ng-bootstrap';
import { CustomDatepickerI18nService, I18n } from 'src/app/services/ngbpicker/custom-datepicker-i18n.service';


@Component({
  selector: 'app-mi-perfil',
  templateUrl: './mi-perfil.component.html',
  styleUrls: ['./mi-perfil.component.css'],
  providers: [I18n,{provide: NgbDatepickerI18n, useClass: CustomDatepickerI18nService}]
})
export class MyComponent implements OnInit {
  
  constructor() {}

  ngOnInit(): void {}

}

You should only need that to make it work. Regards!

Upvotes: 3

Menna Ramadan
Menna Ramadan

Reputation: 485

I use the same HTML syntex

<div class="q-datepicker position-relative w-100">
            <input
                formControlName="From"
                class=" form-control rounded-corner bg-white primary-font-color"
                placement="bottom"
                placeholder=""
                [minDate]=""
                ngbDatepicker
                #d="ngbDatepicker"
                readonly=""
            />
            <button
                type="button"
                (click)="d.toggle()"
            >
                <i class="far fa-calendar-alt"></i>
            </button>
        </div>

Then I create a new service file including the followings:

const I18N_VALUES = {
'Eng': {weekdays: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 
'Nov', 'Dec'],
},
'Frn': {
 weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
 months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep','Oct','Nov', 'Déc']
 }  };




 @Injectable()
language: string = 'Eng';
}

after That and inside the service create new class which extends NgbDatepickerI18n with super() inside the constructor

and implement the followings: 

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

 getDayAriaLabel(date: NgbDateStruct): string {
return `${date.day}-${date.month}-${date.year}`;}

at the end inside your component import the last service and add the following in component

providers: [{provide: NgbDatepickerI18n, useClass: nameOfYourClassWhichExtendsNgbDatepickerI18n}]

Upvotes: 0

Eliseo
Eliseo

Reputation: 57939

You have to make two things

  1. a DateI18nFormater extends NgbDatepickerI18n
  2. a DateParserFormatter extends NgbDateParserFormatter

in your module.ts

providers: [
        { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
        I18n, 
        { provide: NgbDatepickerI18n, useClass: DateI18nFormater }
    ]

Upvotes: 2

Related Questions