RequireJS + Bootstrap Datepicker + Locale Files

Question

I'm switching our project to modules. So most things are working, but some components have some issues. Main issue seems localization files. If I had the solution for this example, I could fix the other issues in my project.

I'm using Bootstrap Datepicker from here https://bootstrap-datepicker.readthedocs.org/

Requirejs Config:

 require.config({
   baseUrl: "Scripts",    
   paths: {
        ... some more like jquery and jquery-ui...
        "bootstrap-datepicker": "bootstrap-datepicker",
        "bootstrap-datepicker-de": "./locales/bootstrap-datepicker.de",     
   }
   shim: {
    'bootstrap-datepicker-de': ['bootstrap-datepicker']
   }
});

App.ts:

... some more imports like jquery and jquery-ui...
import "bootstrap-datepicker";
import "bootstrap-datepicker-de";
... init App ...

bootstrap-datepicker.de.js

    ; (function ($) {
    $.fn.datepicker.dates['de'] = {
        days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
        daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
        daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
        months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
        monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
        today: "Heute",
        monthsTitle: "Monate",
        clear: "Löschen",
        weekStart: 1,
        format: "dd.mm.yyyy"
    };
}(jQuery));

When I load my page I get this error:

bootstrap-datepicker.de.js:7 Uncaught TypeError: Cannot set property 'de' of undefined
at bootstrap-datepicker.de.js:7
at bootstrap-datepicker.de.js:19

Answer 1

We had the same issue and solved it by moving this code into the constructor of our viewmodel

$(document).ready(() => {
        (function($){
            (<any>$.fn.datepicker).dates['de'] = {
                days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
                daysShort: ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
                daysMin: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
                months: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
                monthsShort: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
                today: "Heute",
                monthsTitle: "Monate",
                clear: "Löschen",
                weekStart: 1,
                format: "dd.mm.yyyy"
            };
        }($));

        $('#date').datepicker({
            format: 'dd.mm.yyyy',
            autoclose: true,

            language: "de",

            orientation: 'left bottom'
        });
    });