Greatym.com Greatym.com - 3 months ago 45
AngularJS Question

ngMaterial for date picker is not working in angular js

I need a date picker in input box. Searched around and found ngMaterial provides features like that.

I did all required file inclusion but getting error.


angular.js:68Uncaught Error: [$injector:unpr] Unknown provider:
$$asyncCallbackProvider <- $$asyncCallback <- $animate <- $compile


In index.html I want to show date picker for date of birth field.

<div class="row">
<div class="form-group">
<label class="col-sm-5 control-label" for="dob">Date of Birth</label>
<div class="col-sm-6">
<md-datepicker ng-model="answers.myDate" md-placeholder="Enter date"></md-datepicker>
</div>
</div>
</div>


app.js

var app = angular.module("autoQuote", ["ui.router", "ngResource","ngMaterial"]);
...


Please help me to find, what I am missing here?

Plunker Link

Answer

Working Plunker: https://plnkr.co/edit/F0iWzJqWeidDDSpFY9zK?p=preview

First Mistake: Use Same Version for All Angular Libraries:

Your are using angular: v1.5.7 and angular-animate: v1.3.15 so first fix this

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>

Second Mistake: Inject ngAnimate Dependency:

 var app = angular.module("autoQuote", ["ui.router", "ngResource","ngAnimate","ngMaterial"]);

Hope This Helps!