angular2 mdbootstrap $(...)。pickadate不是一个函数

时间:2017-03-13 12:29:02

标签: angular datepicker frontend

我一直在使用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>

提前致谢。

2 个答案:

答案 0 :(得分:1)

我也遇到了同样的问题。我花了几个小时才找到解决方案。最后,我发现这是因为我使用MDB免费,并且某些功能不支持免费版本,例如日期选择器,选择等等。您可以看到MDB website

中的差异

答案 1 :(得分:0)

我认为你没有导入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>