Global settings [materializeParams] ?

[kjakub]

How can i provide global [materializeParams] setting for example for all date pickers in app ?

<input type="date" [(ngModel)]="user.birth_date" name="birth_date" materialize="pickadate" placeholder="{{ 'BUTTON.DATE' | translate }}" [materializeParams]="[{format:'dd/mm/yyyy', selectYears: 130, selectMonths: true, max: true, monthsFull: [ 'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember' ] }]" required />

[pain0486]

I have tackled this by creating a config.ts file like the following

export const CONFIG = {
  ...
  datePickerOptions: {
    format: 'dd/mm/yyyy',
    selectYears: 130,
    selectMonths: true,
    max: true,
    monthsFull: [
      'Januar',
      'Februar',
      'März',
      'April',
      'Mai',
      'Juni',
      'Juli',
      'August',
      'September',
      'Oktober',
      'November',
      'Dezember'
    ]
  }
...
}
Then on all the components you want to use it on import it and have a property return it
```typescript
import { CONFIG } from '..config';
...
public config = CONFIG.datePickerOptions;
...

Then in your template simply do this

<input type="date" [(ngModel)]="user.birth_date" name="birth_date" materialize="pickadate" placeholder="{{ 'BUTTON.DATE' | translate }}" [materializeParams]="[config]" required />

[kjakub]

Thanks for update @pain0486 i ended up ripping off this lib and making up my own directive because i needed also translations..i am far from being TS expert but this works...

import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
import { Translator } from "angular-translator";

// has been polyfilled from lib
// https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
declare var CustomEvent;
declare var $: any;
declare var Materialize: any;

@Directive({
  selector: '[appCustomDate]'
})
export class CustomDateDirective {

    @Input() ngModel;

  private enCal = {
    labelMonthNext: 'Next month',
    labelMonthPrev: 'Previous month',
    labelMonthSelect: 'Select a month',
    labelYearSelect: 'Select a year',
    monthsFull: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ],
    monthsShort: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],
    weekdaysFull: [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' ],
    weekdaysShort: [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ],
    weekdaysLetter: [ 'S', 'M', 'T', 'W', 'T', 'F', 'S' ],
    today: 'Today',
    clear: 'Clear',
    close: 'Close'
  }

  private frCal = {
    labelMonthNext: 'Mois suivant',
    labelMonthPrev: 'Mois précédent.',
    labelMonthSelect: 'Selectionner mois',
    labelYearSelect: 'Selectionner année',
    monthsFull: [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ],
    monthsShort: [ 'Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Dec' ],
    weekdaysFull: [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ],
    weekdaysShort: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
    weekdaysLetter: [ 'D', 'L', 'M', 'M', 'J', 'V', 'S' ],
    today: "Aujourd'hui",
    clear: 'Effacer',
    close: 'Fermer',
  }

  constructor(private _el: ElementRef, private translator: Translator) {
    // this.translator.languageChanged.subscribe(() => {
    //   // this.perform();
    //   alert(this.translator.language);
    // });
  }

  public ngAfterViewInit() {
      this.perform();
  }

  perform(){
    // this can also subscribe to change and redraw ?
    // https://github.com/InfomediaLtd/angular2-materialize/issues/280

    const defSettings = {      
      format:'dd/mm/yyyy',
      container: 'body',
      selectMonths: true,
      selectYears: 130,
      max: true,
      closeOnSelect: true
    }

    const lanSettings = this.translator.language === "en" ? this.enCal : this.frCal

    const nativeElement = this._el.nativeElement;
    const jqueryPickerElement = $(nativeElement);

    const datePicker = jqueryPickerElement['pickadate']({...defSettings, ...lanSettings});
    const picker = datePicker.pickadate('picker');
    setTimeout(() => {
        if (this.ngModel) { // PR 292 - 1
            picker.set('select', this.ngModel);
        } else {
            const value = jqueryPickerElement.val();
            if (value && value.length>0) {
                picker.set('select', value);
            }
        }
        jqueryPickerElement.on('change', e => nativeElement.dispatchEvent((new CustomEvent("input"))));
    });
  }

}

[kjakub]

412