3

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>
3
  • 1
    Isso provavelmente está acontecendo por que você não estla atribuindo nenhum controller a seu HTML usando a tag ng-controller, você apenas estla o instanciando ...
    – pmargreff
    Commented 19/05/2016 às 10:00
  • como eu faria isso?
    – user10264
    Commented 19/05/2016 às 10:27
  • resposta detalhada abaixo.
    – pmargreff
    Commented 19/05/2016 às 10:49

1 Resposta 1

0

O problema parece ser a falta de declaração do ng-controller no html. toda vez que você instância o controller no js do seu app você precisa indicar qual página ele será usado no seu html, isso porque você pode ter multiplos controllers com funções diferentes para serem usados em páginas diferentes, assim surge a necessidade de identificação.

Como na página do Angular Material mostra, o HTML é envolto pela seguinte div.

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

Que é o que falta no seu caso. Lembre-se que toda vez que desejar que uma função que foi declarada no controller então o seu uso no html tem que acontecer dentro da delimitação das tags, e não apenas na mesma página.

Exemplo de o que não funcionaria.

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

Veja não funcionando no JSFiddle

Pelo fato de apesar da chamada da função ng-click ser usada na mesma página onde está o controller mas ela não pertencer ao controller isso não funciona. O correto seria usarmos a chamada da função dentro da div que está declarando o 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>

Veja funcionando no JSFiddle

1
  • você poderia dá uma olhada! fiz uma atualização. é porque eu tinha copiado errado, agora o resultado em tela é que não aprece nada dessa vez.
    – user10264
    Commented 19/05/2016 às 12:51

Você deve fazer log-in para responder a esta pergunta.