Topic: angular component datepicker – override locale
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 ).
Add comment
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:
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:
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
addLocale(locale: IMyLocales) {
this.localeService.locales=Object.assign({}, this.localeService.locales, locale);
setTimeout(() => {
this.setLocaleOptions();
}, 0);
}
@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,
}
});
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags