I have an angular project, in this project I need to use the angular material Datepicker for select Date .
My project support multi language, and when change the language I need to change datepicker value with Angular Material Adapter by language local date time runtime.
For example, I have persian
and us-en
language in my project. I need when language change to persian
, datepicker set the PersianAdapter
and when select the us-en
language it should set Gregorian Adapter
.
When page reloads, it checks the language value and set value for date picker, but I need to change datepicket value without refreshing the page.
I am using this code for Provider :
import { MaterialPersianDateAdapter, PERSIAN_DATE_FORMATS } from './material.persian-date.adapter';
import { GregorianDateAdapter } from './gregorian-date-adapter';
import { MAT_MOMENT_DATE_FORMATS } from './moment-date-format';
export function createDateProvider() {
const lang = localStorage.getItem('language');
if (lang === 'fa') {
return new MaterialPersianDateAdapter();
} else {
return new GregorianDateAdapter();
}
}
export function getDateFormat() {
const lang = localStorage.getItem('language');
if (lang === 'fa') {
return PERSIAN_DATE_FORMATS;
} else {
return MAT_MOMENT_DATE_FORMATS;
}
}
Module :
providers: [
{ provide: DateAdapter, useFactory: createDateProvider, deps: [MAT_DATE_LOCALE] },
{ provide: MAT_DATE_FORMATS, useFactory: getDateFormat }
]
When change language by refreshing the page, it works fine, but when I need to change provider value in order to change the datepicker value by language runtime, it's not working.
I wrote this code but it doesn't work:
ngOnInit() : void {
let injector = Injector.create([{
provide: DateAdapter,
useValue: MaterialPersianDateAdapter,
deps: [MAT_DATE_LOCALE]
},
{ provide: MAT_DATE_FORMATS, useFactory: getDateFormat }
]);
}
How can I change the datepicker Adapter for selected language ?