Angular Material Datepicker is empty

Question

I am currently building a web application with Angular and I am using Angular Material for some UI components. Currently, I have an issue that I can't resolve. When I use the datepicker like described on https://material.angularjs.org/latest/demo/datepicker, the window opens but it stays empty.

Here's the code snippet for the datepicker.

<md-datepicker ng-model="vm.registrationData.birthDate"
                                   md-placeholder="{{'start_register_birth_date' | translate}}"
                                   required></md-datepicker>
                    <div class="error-message"
                         ng-messages="registerForm.birthDate.$error"
                         ng-if="registerForm.birthDate.$touched && registerForm.birthDate.$invalid">
                        <div class="arrow-right"></div>
                        <p ng-message="required">{{'start_register_error_birthDate_required' | translate}}</p>
                    </div>

Is there maybe something wrong with my imports?

<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-translate/angular-translate.js"></script>
<script src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/moment/moment.js"></script>
<!-- endbower -->
<script src="js/app.min.js"></script>
<script src="js/config.min.js"></script>

<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<!-- endbower -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />

Can you make a working fiddle of this?

shrestha_aj
– shrestha_aj

2016-12-24 23:05:13 +00:00
Commented Dec 24, 2016 at 23:05 — shrestha_aj
– shrestha_aj, Commented Dec 24, 2016 at 23:05
Do yo have console errors ?

van
– van

2016-12-24 23:11:29 +00:00
Commented Dec 24, 2016 at 23:11 — van
– van, Commented Dec 24, 2016 at 23:11
No, there are no console errors. That was my first hope :(

TheWieand
– TheWieand

2016-12-24 23:23:25 +00:00
Commented Dec 24, 2016 at 23:23 — TheWieand
– TheWieand, Commented Dec 24, 2016 at 23:23

ppham27 · Accepted Answer · 2016-12-25 04:21:31Z

18

Use an older version of Angular, say 1.5.9. Angular 1.6 disables prebinding of controllers.

See Issue #10168 for more details. You can add

angular.module('myApp', [])
  .config(function($compileProvider) {
    $compileProvider.preAssignBindingsEnabled(true);
  });

if you insist on using Angular 1.6.

answered Dec 25, 2016 at 4:21

ppham27

8236 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Augie Gardner Over a year ago

Wow, you just saved me several hours of trying to decipher a completely swallowed error. Thank you!

Lexy Feito Over a year ago

thank you very much, is there any risk on enabling this?

ppham27 Over a year ago

@LexyFeito The risk would be that you enabling this will allow you to write controllers with bindings initialized in the constructor. In general, you shouldn't depend on this behavior. Those controllers will be break once you disable this flag. Thus, if you enable this, I'd advise you to vigilant that you're not using any of your bindings in the constructor.

Kevin Cantwell Over a year ago

I'm not that familiar with angular. Where would I put this block of code?

SK. Over a year ago

@NeerajJain: Can you please tell us where to put this code?

Collectives™ on Stack Overflow

Angular Material Datepicker is empty

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related