Am I missing something or is Angular Material's datepicker broken in version 1.1.1?
Example:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.css">
<title>foo</title>
</head>
<body>
<main ng-controller="FooController">
<h1>TEST</h1>
<div><md-datepicker ng-model="myDate" md-placeholder="Choose NOW!"></md-datepicker></div>
<div ng-bind="myDate"></div>
</main>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.js"></script>
<script type="text/javascript">
(function () {
"use strict";
var app = angular.module('app', ['ngAria', 'ngAnimate', 'ngMaterial']);
app.controller('FooController', ['$scope', function ($scope) {
$scope.myDate = null;
}]);
})();
</script>
</body>
</html>
You can save this to a HTML file and open it in your browser, or alternatively here is a live demo: http://codepen.io/anon/pen/JbgVeq
If I try to open the datepicker, it just opens a more or less fully blank dialog. But if I change Material version to 1.1.0 (both in JS and CSS), it works fine. Am I missing something here?
This is due to a change in angular 1.6.
https://github.com/angular/angular.js/blob/master/CHANGELOG.md
You use the workaround provided in the changelog:
Until angular material has fixed the issue.