Aurelia Webpack datepicker is not a function

Question

I have a custom attribute "datepicker" that complains of

TypeError: $(...).datepicker is not a function

I am using skeleton-typescript-webpack as my starting point.

datepicker.ts

import {inject, autoinject, customAttribute, DOM} from "aurelia-framework";
import moment from "moment";

import "jquery";
import "jquery-ui";

@customAttribute("datepicker")
@inject(DOM.Element)
export class JqueryUiDatePicker {
    constructor(private element: Element) {
    moment().format();
    }

    attached() {
        $(this.element)
            .datepicker({dateFormat: "DD/MM/YYYY"})
            .on("change", e => this.fireEvent((e.target) as Element, "input"));
    }

    detached() {
        $(this.element)
            .datepicker("destroy")
            .off("change");
    }

    private fireEvent(element: Element, name: string): void {
        const event = this.createEvent(name);
        this.element.dispatchEvent(event);
    }

    private createEvent(name: string): Event {
        const event = document.createEvent("Event");
        event.initEvent(name, true, true);
        return event;
    }
}

markup

<input class="form-control" id="orderDate" datepicker placeholder="Order Date" type="text" value.bind="model.orderDate | dateFormat: 'DD/MM/YYYY'">

It used to work when Aurelia was in beta, but after I've updated the my code with the latest skeleton-typescript-webpack, it stopped working.

Matthew James Davis Matthew James Davis · Accepted Answer · 2016-08-09T18:44:49

Try import $ from 'jquery';.

Here's blog for a related example: http://davismj.me/blog/semantic-custom-element/

Aurelia Webpack datepicker is not a function

2 Answers