How to configure Angular UI bootstrap directives globally

Question

How can I configure the bootstrap datepicker using uibDatepickerConfig globally? The documentation just says the following:

All settings can be provided as attributes in the uib-datepicker or globally configured through the uibDatepickerConfig.

In the source code, they are defined as constants:

.constant('uibDatepickerConfig', {
    formatDay: 'dd',
    formatMonth: 'MMMM',
    formatYear: 'yyyy',
    formatDayHeader: 'EEE',
    formatDayTitle: 'MMMM yyyy',
    formatMonthTitle: 'yyyy',
    datepickerMode: 'day',
    minMode: 'day',
    maxMode: 'year',
    showWeeks: true,
    startingDay: 0,
    yearRange: 20,
    minDate: null,
    maxDate: null,
    shortcutPropagation: false
})

---

The exact same issue was already discussed in this post but the solution seems to be outdated.

Answer 1

//where app is the module that depends on 'ui.bootstrap'
// probably your main app module

//for DatePicker options
app.config(['uibDatepickerConfig', function (uibDatepickerConfig) {
    uibDatepickerConfig.showWeeks = false;
}]);

//for DatePickerPopup options
app.config(['uibDatepickerPopupConfig', function (uibDatepickerPopupConfig) {
    uibDatepickerPopupConfig.closeText= 'Close';
    uibDatepickerPopupConfig.placement = 'auto bottom';
}]);