Tenho estudado programação Frond-End e tomei várias dicas de amigos sobre AngularJS e me indicação alguns sites de demostrativo de AngularJS, no momento estou tentando implementar Datepicker e não estou tendo resultado.
CLIQUE AQUI PARA VOCÊ VER O DEMOSTRATIVO DO ANGULARJS
Acima você pode observar a implementação e também as linhas de código, de fato fiz do jeito que está no site, e está igualzinho como está no site mas não funcionar, veja abaixo;
<html ng-app="datepickerBasicUsage">
<html>
<head>
<title>Calendário</title>
<style>
HTMLJSCSS
.datepickerdemoBasicUsage {
/** Demo styles for mdCalendar. */ }
.datepickerdemoBasicUsage md-content {
padding-bottom: 200px; }
.datepickerdemoBasicUsage .validation-messages {
font-size: 12px;
color: #dd2c00;
margin: 10px 0 0 25px; }
</style>
<script src="lib/angular.js"></script>
<script>
angular.module("datepickerBasicUsage",
["ngMaterial", "ngMessages"]).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());
$scope.onlyWeekendsPredicate = function(date) {
var day = date.getDay();
return day === 0 || day === 6;
}
});
</script>
</head>
<body>
<h4>Only weekends within given range are selectable</h4>
< ng-model="myDate" md-placeholder="Enter date"
md-min-date="minDate" md-max-date="maxDate"
md-date-filter="onlyWeekendsPredicate"></>
<h4>With ngMessages</h4>
<form name="myForm">
<md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date"
required md-min-date="minDate" md-max-date="maxDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<div class="validation-messages" ng-messages="myForm.dateField.$error">
<div ng-message="valid">The entered value is not a date!</div>
<div ng-message="required">This date is required!</div>
<div ng-message="mindate">Date is too early!</div>
<div ng-message="maxdate">Date is too late!</div>
<div ng-message="filtered">Only weekends are allowed!</div>
</div>
</form>
</md-content>
</div>
</body>
</html>
Alguém consegui enxergar aonde está errado?
Aparece isso em tela
Only weekends within given range are selectable
< ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate" md-date-filter="onlyWeekendsPredicate">
With ngMessages
The entered value is not a date!
This date is required!
Date is too early!
Date is too late!
Only weekends are allowed!
ATUALIZAÇÃO///////////////////////////////////////////////////////////
div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
<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" md-placeholder="Enter date" disabled></md-datepicker>
<h4>Date-picker with min date and max date</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
<h4>Only weekends are selectable</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<h4>Only weekends within given range are selectable</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
md-min-date="minDate" md-max-date="maxDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<h4>With ngMessages</h4>
<form name="myForm">
<md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date"
required md-min-date="minDate" md-max-date="maxDate"
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
<div class="validation-messages" ng-messages="myForm.dateField.$error">
<div ng-message="valid">The entered value is not a date!</div>
<div ng-message="required">This date is required!</div>
<div ng-message="mindate">Date is too early!</div>
<div ng-message="maxdate">Date is too late!</div>
<div ng-message="filtered">Only weekends are allowed!</div>
</div>
</form>
</md-content>
</div>