Global configuration of ngx-bootstrap datepicker format

Davy picture Davy · Apr 10, 2018 · Viewed 8.8k times · Source

Is it possible to globally configure a date format for the ngx-bootstrap datepicker?

The documentation mentions the BsDatepickerConfig class and how to pass it to each individual datepicker, but im a bit surprised that there seems to be no possibility to configure this globally (at least not documented)

https://valor-software.com/ngx-bootstrap/#/datepicker#bs-datepicker-config

Answer

IlyaSurmay picture IlyaSurmay · Apr 10, 2018

This is not yet documented, but it can be achieved pretty easy. We have several demos of that for different components (tooltips, popovers, etc) and the code for datepicker will be almost the same. If you want to configure datepickers globally, replace basic BsDatepickerConfig with your one in providers section of your component or module.

export function getDatepickerConfig(): BsDatepickerConfig {
  return Object.assign(new BsDatepickerConfig(), {
    dateInputFormat: 'YYYY-MM-DD'
  });
}

@NgModule({
  ...
  providers: [{ provide: BsDatepickerConfig, useFactory: getDatepickerConfig }]
})

Example - https://stackblitz.com/edit/angular-tvahsw?file=app%2Fapp.module.ts