Question

我正在尝试引用此站点以使用/导入jquery-ui的datepicker元素： http://ilikekillnerds.com/2016/02/using-jquery-ui-widgets-in-aurelia/

我的第一个障碍是尝试将其导入我的班级。如果我只是做一个常规的

import 'jquery';
import 'jquery-ui';

它导入它很好，但我不能引用“datepicker”对象。如果我导入它就像网站告诉我的那样：

import 'jquery';
import { datepicker } from 'jquery-ui';

我在第二个import语句中收到有关如何找不到该模块的错误。就像我刚开始说的那样，如果我只是import 'jquery-ui'，那么在我的代码中，它就无法识别$(this).datepicker();

如果我只是运行应用程序，我得到一个正常的输入框但没有datepicker这是我从bluebird.min.js得到的错误：

未处理拒绝TypeError：jquery_1.default不是函数

导入此库并使用它的正确方式是什么？

完整自定义元素代码

import { customElement, bindable, inject } from 'aurelia-framework';
import $ from 'jquery';
import 'jquery-ui';

@customElement('date-picker')
@inject(Element)
export class DatePicker {
    @bindable id = '';
    @bindable name = '';
    @bindable options = {};
constructor(Element) {
    this.element = Element;

    if (!this.id && this.name) {
        this.id = this.name;
    }

    if (!this.name && this.id) {
        this.name = this.id;
    }
}

attached() {
    $(`#${this.id}`).datepicker(this.options)
        .on('change', e => {
            let changeEvent = new CustomEvent('input', {
                detail: {
                    value: e.val
                },
                bubbles: true
            });

            this.element.dispatchEvent(changeEvent);
        });
}

detached() {
    $(`#${this.id}`).datepicker('destroy').off('change');

}
}

HTML部分

<template>
    <input type="text" id.bind="id" name.bind="name">
</template>

Answer 1

终于开始工作了。安装/卸载类型/软件包等几个小时后，如果我将其导入我的typescript文件，它可以工作，如下所示：

import 'jquery';
import 'jquery-ui';

在我度过的所有时间之后，我无法相信这很容易......

为什么我不能用jQuery UI导入datepicker？

1 个答案: