angularjs-directives – Angular Material Datepicker does not work

Question:

I've been studying Frond-End programming and have taken several tips from friends about AngularJS and referred me to some AngularJS demo sites, at the moment I'm trying to implement Datepicker and I'm not getting any results.

CLICK HERE FOR YOU TO SEE THE ANGULARJS DEMO

Above you can see the implementation and also the lines of code, in fact I did it the way it is on the site, and it's the same as it is on the site but it doesn't work, see below;

<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>

Has anyone been able to see where it's wrong?

This appears on screen

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!

UPDATE///////////////////////////////////////////////// //////////

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>

Answer:

The problem seems to be the lack of ng-controller declaration in the html . every time you instance the controller in your app js you need to indicate which page it will be used in your html , that's because you can have multiple controllers with different functions to be used in different pages, so the need for identification arises.

As the Angular Material page shows, the HTML is surrounded by the following div .

    <div ng-controller="AppCtrl" style='padding: 40px;' ng-cloak>
    ... página aqui ...
    </div>

Which is what's missing in your case. Remember that every time you want a function that has been declared in the controller then its use in the html has to happen within the tags' boundaries, not just on the same page.

Example of what wouldn't work.

<body>
<div>
<div ng-app="myApp" ng-controller="myCtrl">

<p>{{ count }}</p>

</div>

<button ng-click="count = count + 1">Click Me!</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script> 
</body>

See not working in JSFiddle

Because even though the call to the ng-click function is used on the same page as the controller but it doesn't belong to the controller it doesn't work. The correct thing would be to use the function call inside the div that is declaring the ng-controller .

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click Me!</button>
<p>{{ count }}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.count = 0;
});
</script> 
</body>

See it working on JSFiddle

Scroll to Top
AllEscort