<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.css">
<script src="script.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<form>
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-date-locale="locale1"></md-datepicker></br>
<md-datepicker ng-model="myDate" md-date-locale="locale2"></md-datepicker> (want 'MMMM YYYY' e.g. July 2017)
</md-content>
</form>
</div>
</body>
</html>
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.myDate = new Date()
$scope.locale1 = {
formatDate: function(date) {
var m = moment(date);
return m.isValid() ? m.format('L') : '';
}
};
$scope.locale2 = {
formatDate: function(date) {
var m = moment(date);
return m.isValid() ? m.format('MMMM YYYY') : '';
}
};
})
/* Styles go here */