How to set default MdDatePicker options (translations for weekdays, months..) for all instances on one place e.g App constructor?

Aurelia project with TypeScript (tsc 2.1.4), JSPM and [email protected].

Project is multilingual (translations are in database and injected via "LanguageService" where needed) so we need translated instances of MdDatePicker too.

I found a way how to translate properties like monthsFull, monthsShort, today... per instance of MdDatePicker (pickadate.js picker's properties actually) on this way in view/view-model:

    <input md-datepicker="container: body;value.two-way: fromDate;"
           md-datepicker.ref="dpickerFrom" 
           type="date" placeholder=${dtPickTitle} />

    attached(
      var picker = (<any>this).dpickerFrom.picker;    
      var settings = picker.component.settings;

      settings.monthsFull = this.languageService.datePickerTran.monthsFull; // e.g. [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ]
      settings.today = this.languageService.datePickerTran.today; //e.g."Heute"
      picker.render(true);
    )

I have tried to reach needed properties globally in App.ts:

import * as bridge from 'aurelia-materialize-bridge';

 constructor (){
     bridge.MdDatePicker.prototype;//Can't find where to put translations
}

but I could not find needed.

Is this right approach at all? Considering given platform, is there any way to set this properties (defaults) on one place for all instances?

Solution

I've told the OP to post my answer back here. So here it goes.. :-)

There is an options bindable here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L19

That object is merged here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L64

And the result is used to initialize the datepicker here: https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L76

Now, if you visited the links you may have seen a commented example of an i18n config here (German strings): https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L47-L60

So, if you set the i18n properties in the options bindable, it could work..

<input
  md-datepicker="container: body; value.two-way: selectedDate; options.bind:i18nOptions;"
  type="date" placeholder="pick a date"/>

Where i18nOptions might be:

{
   selectMonths: true, // Creates a dropdown to control month
   selectYears: 15, // Creates a dropdown of 15 years to control year
   monthsFull: [ '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' ],
   weekdaysFull: [ 'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag' ],
   weekdaysShort: [ 'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa' ],
   today: 'Heute',
   clear: 'Löschen',
   close: 'Schließen',
   firstDay: 1,
   format: 'dddd, dd. mmmm yyyy',
   formatSubmit: 'yyyy/mm/dd'
}

I definitely want to make it more explicit.