angular component datepicker – override locale

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: angular component datepicker – override locale

Stjepan Marjanovic pro asked 7 years ago

Is it possible to override locales (setup custom set of locales configurations) without changing original mdboostrap localeService?

You proposal is to do it within mdbootrap code (https://mdbootstrap.com/angular/advanced/datepicker/#translation ).

Damian Gemza staff answered 7 years ago

Dear Stjepan, Please open your datepicker/services/datepickerLocale.service, and change locales variable from private to public (line 6), Then open datepicker/datepicker.component.ts file and add code from below right after setLocaleOptions() method: 
addLocale(locale: IMyLocales) {

this.localeService.locales=Object.assign({}, this.localeService.locales, locale);

setTimeout(() => {

this.setLocaleOptions();

}, 0);
}
Then in app.component.html add reference #datePicker to your mdb-date-picker element and add [locale]=" 'de' " field on it, Then add this code to your app.component.ts file. Instead of 'de', please add your custom locale option: 
@ViewChild('datePicker') datePicker: MDBDatePickerComponent;

public myDatePickerOptions: IMyOptions= {

};

ngAfterViewInit() {

this.datePicker.addLocale({

de: {

dayLabels: { su:'Son', mo:'Mon', tu:'Die', we:'Mit', th:'Don', fr:'Fre', sa:'Sam' },

dayLabelsFull: { su:"Sonntag", mo:"Montag", tu:"Dienstag", we:"Mittwoch", th:"Donnerstag", fr:"Freitag", sa:"Samstag" },

monthLabels: { 1:'Jan', 2:'Feb', 3:'Mär', 4:'Apr', 5:'Mai', 6:'Jun', 7:'Jul', 8:'Aug', 9:'Sep', 10:'Okt', 11:'Nov', 12:'Dez' },

monthLabelsFull: { 1:"Januar", 2:"Februar", 3:"März", 4:"April", 5:"Mai", 6:"Juni", 7:"Juli", 8:"August", 9:"September", 10:"Oktober", 11:"November", 12:"Dezember" },

dateFormat:"dd mmmm yyyy",

todayBtnTxt:"Heute",

clearBtnTxt:"Klar",

closeBtnTxt:"Schließen",

firstDayOfWeek:"mo",

sunHighlight:true,

}

});

}
After those changes, your datepicker should use your custom locale options without modifying our source files. Fixes in datepickerLocale.service and datepicker.component files will be added in next release of MDB Angular. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
Stjepan Marjanovic
Pro User
0Support score
1Questions 0Answers
0Snippets likes 0Snippets