Aurelia date picker

date-picker.html

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

date-picker.js

import {inject, bindable, bindingMode} from 'aurelia-framework';
/*eslint-disable no-unused-vars*/
import $ from 'jquery';
import 'bootstrap';
import 'datepicker';
/*eslint-enable no-unused-vars*/

import moment from 'moment';

@inject(Element)
@bindable({ name: 'value', defaultValue: undefined, defaultBindingMode: bindingMode.twoWay })
@bindable({ name: 'format', defaultValue: 'mm/dd/yyyy', defaultBindingMode: bindingMode.oneTime })
export class DatePicker {

  constructor(element) {
    this.element = element;
  }

  attached() {

    this.datePicker = $(this.element).find('input')
      .datepicker({
        autoclose: true,
        format: this.format,
        //startDate: new Date(),
        todayBtn: true,
        todayHighlight: true
      });

    this.datePicker.on('changeDate', (e) => {
      if (e.date) {
        this.value = moment(e.date).format('MM/DD/YYYY');
      }
    });
  }

  valueChanged(newValue) {
    $(this.element).find('input').val(newValue).trigger('changeDate');
  }

}

implentation

<require from="resources/components/date-picker"></require>
...  
<date-picker value.bind="session.assigned_date"></date-picker>