如何在一个地方为所有实例设置默认 MdDatePicker 选项（工作日、月份的翻译......），例如 App 构造函数？

Question

带有 TypeScript (tsc 2.1.4)、JSPM 和 aurelia-materialize-bridge@0.20.6 的 Aurelia 项目。

项目是多语言的（翻译在数据库中并在需要时通过 "LanguageService" 注入）所以我们也需要 MdDatePicker 的翻译实例。

我找到了一种翻译 monthsFull、monthsShort、today 等属性的方法。 .. 每个 MdDatePicker 实例（实际上是 pickadate.js 选择器的属性）在 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);
    )

我已尝试在 App.ts 中获取全局所需的属性：

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

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

但我找不到需要的。

这种方法完全正确吗？考虑到给定的平台，有没有办法在一个地方为所有实例设置此属性（默认值）？

Answer 1

我已经告诉 OP post 我的回答在这里。所以就这样.. :-)

这里有一个 options 可绑定：https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L19

该对象已合并到此处：https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L64

结果用于在此处初始化日期选择器：https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L76

现在，如果您访问了这些链接，您可能已经在此处看到了带注释的 i18n 配置示例（德语字符串）：https://github.com/aurelia-ui-toolkits/aurelia-materialize-bridge/blob/master/src/datepicker/datepicker.js#L47-L60

因此，如果您在 options 可绑定中设置 i18n 属性，它就可以工作..

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

其中 i18nOptions 可能是：

{
   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'
}

我绝对想把它说得更明确。

Answer 2

我有一个类似的答案

在我看来我有

<div class="input-field col s6">                        
    @Html.EditorFor(model => model.FECHAI_VIG, new { htmlAttributes = new { @id = "fechai_vig", @class = "form-control datepicker", @onkeyup = "borrar(this);" } })
    @Html.LabelFor(model => model.FECHAI_VIG, "De", htmlAttributes: new { @class = "active" })                        
</div>

并且在脚本中

<script>
    var elemth = document.querySelector('#fechai_vig');
    var optionsth = { 
        format: 'dd/mm/yyyy',
        i18n: {
            clear: 'Limpiar',
            today: 'Hoy',
            done: 'Seleccionar',
            previousMonth: '‹',
            nextMonth: '›',
            months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
            monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
            weekdaysShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
            weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
            weekdaysAbbrev: ['D', 'L', 'M', 'X', 'J', 'V', 'S']
        }
    };
    var instanceth = M.Datepicker.init(elemth, optionsth);  
</script>

如何在一个地方为所有实例设置默认 MdDatePicker 选项（工作日、月份的翻译......），例如 App 构造函数？

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

aurelia

materialize

pickadate