Question

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

以下是我的代码段

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

然后我在 jQuery 中添加了关于jQuery-ui和index.html的脚本网址，但错误仍然存在。我需要在component.ts或app.module.ts

中导入具体的内容吗？

Answer 1

问题可能是

如果有任何其他库使用$ variable
可能缺少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的入口点）。

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

2 个答案: