包装在TypeScript函数中的JavaScript函数不起作用

Question

我正在尝试实现一个datepicker其单击后的按钮将显示一个日历。 为此，我将datepicker() （JavaScript函数）包装在pickDate() （用户定义的TypeScript函数）中，但是该按钮没有单击/显示任何内容 。 可能出什么问题了？

以下是我的代码段

HTML文件

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon" (click)="pickDate()">
            <span class="fa fa-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

.ts文件

import {Component} from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector : 'pm-datepicker', /** This is a directive which implies this Component's template can be
    used as any other Component's template.  */
    templateUrl : './datepicker.component.html' /** Path to our HTML file */
})

export class DatePickerComponent {

    pickDate() {
        console.log(5); /** To check if something is logging */
        $('#datetimepicker1').datepicker();
    }
}

控制台错误

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery__(...).datepicker is not a function
    at DatePickerComponent.webpackJsonp.../../../../../src/app/datepicker/datepicker.component.ts.DatePickerComponent.pickDate (datepicker.component.ts:18)
    at Object.eval [as handleEvent] (DatePickerComponent.html:21)
    at handleEvent (core.es5.js:11998)
    at callWithDebugContext (core.es5.js:13467)
    at Object.debugHandleEvent [as handleEvent] (core.es5.js:13055)
    at dispatchEvent (core.es5.js:8614)
    at core.es5.js:9228
    at HTMLSpanElement.<anonymous> (platform-browser.es5.js:2648)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)

编辑2

我执行了以下步骤：

npm install jquery-ui --save

然后在index.html包含有关jQuery和jQuery-ui的脚本URL，但错误仍然存​​在。 我需要在我的component.ts或app.module.ts具体导入什么吗？

Answer 1

问题可能是

1. 如果还有其他使用$变量的库
2. 可能缺少jQuery中的某些文件

如果没有任何效果，请同时包含datepicker.js

 <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.5.4/datepicker.js"></script> 

Answer 2

看来您将需要包含$.datepicker才能获取该功能。 由于似乎您正在使用webpack，因此应该使用简单的npm install jquery-ui来获取整个jquery-ui软件包，或者应该使用npm install jquery-datepicker来获取datepicker模块。

使用它之前，您还需要在源中包括它（或将其添加为webpack的入口点）。