Sudip_dotnetdv Sudip_dotnetdv - 2 months ago 19
AngularJS Question

Angular material datepicker component not working

I am learning angularjs and using angularjs material datepicker component for date control but its not working, I am using the same code as found in material.angularjs.org but my control is not showing please help.
My html page is DatePicker.html:

<!DOCTYPE html>
<html ng-app="datepickerBasicUsage">

<head>
<title></title>
<link href="angular-material.min.css" rel="stylesheet" />
<script src="angular.min.js"></script>
<script src="angular-animate.min.js"></script>
<script src="angular-aria.min.js"></script>
<script src="angular-material.min.js"></script>

<script src="myapp.js"></script>
</head>

<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
<h4>Disabled date-picker</h4>
<md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker>
<h4>Date-picker with min date and max date</h4>
<md-datepicker ng-model="myDate" placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
</md-content>
</div>
</body>

</html>


myapp.js

angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.myDate = new Date();
$scope.minDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() - 2,
$scope.myDate.getDate());
$scope.maxDate = new Date(
$scope.myDate.getFullYear(),
$scope.myDate.getMonth() + 2,
$scope.myDate.getDate());
});


above is the code which I got from the site's documentation.
But its not working, what I am doing wrong. Please help.

Answer

you must have something wrong with your imports I think, I put you code in to plunker

<div ng-controller="AppCtrl" style='padding: 40px;'>
    <md-content>
      <h4>Standard date-picker</h4>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
      <h4>Disabled date-picker</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker>
      <h4>Date-picker with min date and max date</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date"
                 md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
    </md-content>
</div>

and it's working fine ?! Please check you imports!

Comments