ngMaterial for date picker is not working in angular js

Question

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

score 3 · Accepted Answer · answered Sep 02 '16 at 10:28

3

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!

answered Sep 02 '16 at 10:28

Jazib Bashir

493
5
19

I don't want right arrow to open date picker calendar. I wan calendar to be open when user focus in text box. but he should not be able to type in text box. – Praveen D Sep 02 '16 at 10:36
If you want to open calendar on focus set md-directive ==>> "md-open-on-focus" || or read documentation for more configurations. https://material.angularjs.org/latest/demo/datepicker – Jazib Bashir Sep 02 '16 at 10:40
can we use this directive as attribute? I need to fix many ui issue. like I want o show it left and as below input box. – Praveen D Sep 02 '16 at 10:52
Yes Angular Directive support 4 Types: 'A' - only matches attribute name, 'E' - only matches element name, 'C' - only matches class name, 'M' - only matches comment. Read this for more information: https://docs.angularjs.org/guide/directive – Jazib Bashir Sep 02 '16 at 11:24
I am asking about ngAnimate directive. – Praveen D Sep 06 '16 at 09:02

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

Looks like your ng-animate does not match the angular.js version does it? Same? problem here

edited May 23 '17 at 10:29

Community

1
1

answered Sep 02 '16 at 10:27

Edub

508
7
24

ngMaterial for date picker is not working in angular js

2 Answers2