I have recently started learning angularjs and decided to utilize the angularjs material datepicker component to manage dates in my project. However, I seem to be encountering some issues as the control is not displaying properly on my DatePicker.html page. I have followed the code provided on material.angularjs.org but still no luck. Can anyone offer assistance with this problem? Here is a snippet of my HTML code from 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>
In addition, here is my JavaScript code snippet from 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());
});
The code above was taken directly from the official documentation website, yet it is not functioning correctly. Any suggestions on what might be causing this issue would be greatly appreciated. Thank you for your help.