Using bootstrap datetimepicker in aurelia (element) using typescript

BootstrapV3DatetimePicker.d.ts

/**
 * Extension Types for the BootstrapV3DatetimePicker tsd files
 * Thanks to : https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/bootstrap.v3.datetimepicker 
 */

/// <reference path="../../jquery/jquery.d.ts"/>
/// <reference path="../../moment/moment.d.ts"/>

declare module BootstrapV3DatetimePicker {
    interface DatetimepickerChangeEventObject extends DatetimepickerEventObject {
        oldDate: moment.Moment;
    }

    interface DatetimepickerEventObject extends JQueryEventObject {
        date: moment.Moment;
    }

    interface DatetimepickerIcons {
        time?: string;
        date?: string;
        up?: string;
        down?: string;
        previous?: string;
        next?: string;
        today?: string;
        clear?: string;
        close?: string;
    }

    interface DatetimepickerTooltips {
        today?: string,
        clear?: string,
        close?: string,
        selectMonth?: string,
        prevMonth?: string,
        nextMonth?: string,
        selectYear?: string,
        prevYear?: string,
        nextYear?: string,
        selectDecade?: string,
        prevDecade?: string,
        nextDecade?: string,
        prevCentury?: string,
        nextCentury?: string,
        pickHour?: string,
        incrementHour?: string,
        decrementHour?: string,
        pickMinute?: string,
        incrementMinute?: string,
        decrementMinute?: string,
        pickSecond?: string,
        incrementSecond?: string,
        decrementSecond?: string,
        togglePeriod?: string,
        selectTime?: string
    }

    interface DatetimepickerWidgetPositioning {
        horizontal?: string;
        vertical?: string;
    }

    interface DatetimepickerOptions {
        timeZone?: string;
        format?: string | boolean;
        dayViewHeaderFormat?: string;
        extraFormats?: boolean | Array<string>;
        stepping?: number;
        minDate?: moment.Moment | Date | string;
        maxDate?: moment.Moment | Date | string;
        useCurrent?: boolean;
        collapse?: boolean;
        locale?: moment.Moment | Date | string;
        defaultDate?: moment.Moment | Date | string;
        disabledDates?: Array<moment.Moment | Date | string>;
        enabledDates?: Array<moment.Moment | Date | string>;
        icons?: DatetimepickerIcons;
        tooltips?: DatetimepickerTooltips,
        useStrict?: boolean;
        sideBySide?: boolean;
        daysOfWeekDisabled?: Array<number>;
        calendarWeeks?: boolean;
        viewMode?: string;
        toolbarPlacement?: string;
        showTodayButton?: boolean;
        showClear?: boolean;
        showClose?: boolean;
        widgetPositioning?: DatetimepickerWidgetPositioning;
        widgetParent?: string;
        ignoreReadonly?: boolean;
        keepOpen?: boolean;
        focusOnShow?: boolean;
        inline?: boolean;
        keepInvalid?: boolean;
        datepickerInput?: string;
        keyBinds?: Object;
        debug?: boolean;
        allowInputToggle?: boolean;
        disabledTimeIntervals?: boolean;
        disabledHours?: boolean;
        enabledHours?: boolean;
        viewDate?: boolean;
    }

    interface Datetimepicker {
        date(date: moment.Moment | Date | string): void;
        date(): moment.Moment;
        minDate(date: moment.Moment | Date | string): void;
        minDate(): moment.Moment | boolean;
        maxDate(date: moment.Moment | Date | string): void;
        maxDate(): moment.Moment | boolean;
        show(): void;
        disable(): void;
        enable(): void;
    }

}


interface JQuery {

    datetimepicker(): JQuery;
    datetimepicker(options: BootstrapV3DatetimePicker.DatetimepickerOptions): JQuery;

    off(events: "dp.change", selector?: string, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerChangeEventObject) => any): JQuery;
    off(events: "dp.change", handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerChangeEventObject) => any): JQuery;

    on(events: "dp.change", selector: string, data: any, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerChangeEventObject) => any): JQuery;
    on(events: "dp.change", selector: string, handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerChangeEventObject) => any): JQuery;
    on(events: 'dp.change', handler: (eventObject: BootstrapV3DatetimePicker.DatetimepickerChangeEventObject) => any): JQuery;

    off(events: "dp.show", selector?: string, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    off(events: "dp.show", handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    on(events: "dp.show", selector: string, data: any, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: "dp.show", selector: string, handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: 'dp.show', handler: (eventObject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    off(events: "dp.hide", selector?: string, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    off(events: "dp.hide", handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    on(events: "dp.hide", selector: string, data: any, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: "dp.hide", selector: string, handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: 'dp.hide', handler: (eventObject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    off(events: "dp.error", selector?: string, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    off(events: "dp.error", handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    on(events: "dp.error", selector: string, data: any, handler?: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: "dp.error", selector: string, handler: (eventobject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;
    on(events: 'dp.error', handler: (eventObject: BootstrapV3DatetimePicker.DatetimepickerEventObject) => any): JQuery;

    data(key: 'DateTimePicker'): BootstrapV3DatetimePicker.Datetimepicker;
}

datePicker.html

<template>
    <div class="input-group input-group-sm">
        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
        <input type="text" value.bind="value" class="form-control">
    </div>
</template>

datePicker.ts

import {inject, bindable, customElement, bindingMode} from "aurelia-framework";
import "jquery";
import "moment";
import "moment/locale/en-gb";
import "bootstrap-datetimepicker";
import "bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css!css";

@inject(Element)
@customElement("date-picker")
export class DatePicker {

    @bindable({ defaultBindingMode: bindingMode.twoWay })
    public options: BootstrapV3DatetimePicker.DatetimepickerOptions;
    @bindable({ defaultBindingMode: bindingMode.twoWay })
    public enableTime: boolean;
    @bindable({ defaultBindingMode: bindingMode.twoWay })
    public value: Date;

    public element: HtmlElement;
    public dateTimePicker: any;

    constructor(element: HtmlElement) {
        this.element = element;
        this.options = <BootstrapV3DatetimePicker.DatetimepickerOptions>{};
        this.enableTime = false;
    }

    public attached(): void {
        this.options.icons = {
            time: "fa fa-clock-o",
            date: "fa fa-calendar",
            up: "fa fa-chevron-up",
            down: "fa fa-chevron-down",
            previous: "fa fa-chevron-left",
            next: "fa fa-chevron-right",
            today: "fa fa-calendar-check-o",
            clear: "fa fa-trash-o",
            close: "fa fa-close"
        };
        this.options.showClose = true;
        this.options.showTodayButton = true;
        this.options.collapse = true;
        this.options.locale = moment.locale("en-gb");
        if (this.enableTime === false) {
            this.options.format = "L";
        }
        this.dateTimePicker = $(this.element)
            .find(".input-group").datetimepicker(this.options);

        this.dateTimePicker.on("dp.change", (e: any) => {
            this.value = moment(e.date).toDate();
        });

    }
}

mypage.html

            ....
            <require from="./elements/datePicker"></require>
            ....
            <div class="form-group row">
                <label class="col-sm-3 form-control-label">Date of Birth :</label>
                <div class="col-sm-9">
                    <date-picker value.bind="myDate"></date-picker>
                </div>
            </div>
            ....

Displays how to use bootstrap datetimepicker (https://eonasdan.github.io/bootstrap-datetimepicker/) in aurelia.
Pre-requisites

• jquery
• momentjs
• https://eonasdan.github.io/bootstrap-datetimepicker/