CODEWITHSUNDEEP
angulardatepickerfrontend
naruto
naruto

Reputation: 541

angular2 mdbootstrap $(...).pickadate is not a function

I have been creating an application using Angular2 and mdbootstrap. when I call $('.datepicker').pickadate() ,I'm getting the error 

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>

Thanks in advance.

Upvotes: 0

Views: 869

Answers (2)

ZhangXu
ZhangXu

Reputation: 141

I also come across same problem. I take a few hour to find solution. Finally, I find this is because I use MDB free, and some function is not support in free version, such as date-picker, select and so on.You can see differences in MDB website

Upvotes: 1

ieatbytes
ieatbytes

Reputation: 516

I think you are not importing mdb's javascript files as well as bootstrap ones

<!-- 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>

Upvotes: 0

Related Questions