angular2 mdbootstrap $(...).pickadate不是函数

Question

我一直在使用Angular2和mdbootstrap创建一个应用程序。当我调用$('.datepicker').pickadate()时，我得到了错误

EXCEPTION: $(...).pickadate is not a function

app.component.ts

import {Component, OnInit, AfterViewInit} from '@angular/core';
declare var $: any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  implements AfterViewInit{
  title = 'app works!';

  ngAfterViewInit() {
    $('.datepicker').pickadate();
  }

}

app.component.html

<div class="md-form">
  <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
  <label for="date-picker-example">Try me...</label>
</div>

index.html

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" />
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

提前谢谢。

Answer 1

我也遇到了同样的问题。我花了几个小时来寻找解决方案。最后，我发现这是因为我使用了免费MDB，而一些功能在免费版本中是不支持的，比如日期选择器、select等，所以on.You可以看到MDB website中的差异

Answer 2

我认为您没有导入mdb的javascript文件和bootstrap文件

<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>

<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>