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.
Try import $ from 'jquery';
.
Here's blog for a related example: http://davismj.me/blog/semantic-custom-element/
I am using au cli (with typescript)... so YMMV; but the following import worked for me
import * as $ from 'jquery'
yes, you do need to import jquery-ui as well
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.