Angular Material Datepicker does not work

Asked

Viewed 722 times

3

I have studied programming Frond-End and I took several tips from friends on Angularjs and refer me some demo sites of Angularjs, at the moment I am trying to implement Datepicker and I am not having result.

CLICK HERE FOR YOU TO SEE THE DEMONSTRATION OF ANGULARJS

Above you can see the implementation and also the lines of code, in fact I did the way it is on the site, and it looks exactly like it is on the site but does not 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>

Someone could see where it was 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!

UPDATING///////////////////////////////////////////////////////////

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>
angularjs-directives angular-module angular
  • 1

    This is probably happening because you are not assigning any controller to your HTML using the ng-controller tag, you are just instantiating it ...

  • how would I do that?

  • detailed answer below.

1 answer

1


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

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

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

Which is what is missing in your case. Remember that every time you want a function that has been declared on controller then its use in the html has to happen within tag delimitation, 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>

Behold nay running on Jsfiddle

Because despite the call of the function ng-click be used on the same page as the controller but she does not belong to the controller this does not work. The correct thing would be to use the function call within 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 working on Jsfiddle

  • you could take a look! I did an update. it’s because I had copied wrong, now the result on screen is that it shows nothing this time.

Browser other questions tagged angularjs-directives angular-module angular

You are not signed in. Login or sign up in order to post.