Flatpicker custom attribute

flatpickr.d.ts

// https://github.com/Microsoft/TypeScript/issues/5073

declare module 'flatpickr' {
  class Flatpickr {
    constructor(element: Element, options?: any);
    destroy();
  }
  namespace Flatpickr {}
  export = Flatpickr;
}

flatpickr.ts

import {autoinject, bindable, bindingMode, customAttribute, LogManager} from 'aurelia-framework';
import * as Flatpickr from 'flatpickr';

import {fireEvent} from '../../common/events';

@customAttribute('flatpickr')
@autoinject()
export class FlatpickrAttribute {
  @bindable() value: Date = new Date();
  @bindable({
    defaultBindingMode: bindingMode.oneTime
  }) elementOverride;
  fpInstance;
  log;

  constructor(private element: Element) {
    this.log = LogManager.getLogger('flatpickr');
  }

  bind() {
    if (!this.elementOverride && this.element.tagName !== 'INPUT') {
      this.elementOverride = this.element.querySelector('input');
    }
    this.fpInstance = new Flatpickr(this.elementOverride || this.element, {
      defaultDate: this.value,
      dateFormat: 'd.m.Y',
      onChange: this.handlePickerChange.bind(this)
    });
  }

  attached() { }

  detached() {
    this.fpInstance.destroy();
  }

  handlePickerChange(dateObj, dateStr, instance) {
    fireEvent(this.element, 'date-change', { date: dateObj, dateString: dateStr });
  }

  valueChanged(newValue) {
    if (this.fpInstance) {
      this.fpInstance.setDate(newValue);
    }
  }
}