Datepicker // Aurelia (RequireJS/CLI)

date-picker.html

<template>
  <require from="resources/components/adaptive-input"></require>

  <adaptive-input input-class="form-control date" type="text" id.bind="id" label.bind="label" value.bind="value"></adaptive-input>
</template>

date-picker.js

import {inject, bindable, bindingMode} from 'aurelia-framework';

/*eslint-disable no-unused-vars*/
import 'bootstrap';
import 'bootstrap-datepicker';
import $ from 'jquery';
/*eslint-enable no-unused-vars*/
import moment from 'moment';

/**
 * Decorators
 */
@bindable({ name: 'value', defaultValue: undefined, defaultBindingMode: bindingMode.twoWay })
@bindable({ name: 'id', defaultValue: null, defaultBindingMode: bindingMode.oneWay })
@bindable({ name: 'label', defaultValue: null, defaultBindingMode: bindingMode.oneWay })
@bindable({ name: 'format', defaultValue: 'yyyy-mm-dd', defaultBindingMode: bindingMode.oneTime })

@inject(Element)

/**
 * DatePicker Class
 * @class
 */
export class DatePicker {

  /**
   * constructs an instance
   * @param element {object} - element instance
   * @constructor
   */
  constructor(element) {
    this.element = element;
  }

  /**
   * Called when class is attached to the document
   */
  attached() {
    /**
     * Sets up the jquery datepicker object
     */
    this.datePicker = $(this.element).find('input')
      .datepicker({
        autoclose: true,
        format: this.format.toLowerCase(),
        //startDate: new Date(),
        todayBtn: true,
        todayHighlight: true
      });
    /**
     * Sets up an event handler to update the value if it has changed
     */
    this.datePicker.on('changeDate', (e) => {
      if (e.date) {
        this.value = moment(e.date).format(this.format);
      }
    });
  }

  /**
   * Called when the class is removed from the document
   */
  detached() {
    this.datePicker.off('changeDate');
    $(this.element).datepicker('remove');
  }

  /**
   * Handles the value changed event for the property and sets the new value in the form
   * @param newValue {string} - value
   */
  valueChanged(newValue) {
    $(this.element).find('input').val(newValue).trigger('changeDate');
  }

}