如何在日历窗格中使用monthpicker扩展datepicker指令?

时间:2016-12-20 20:08:15

标签: angularjs angularjs-directive

我是Angularjs的新手,如何扩展md-datepicker指令以实施可点击的日历窗格,该窗格根据选定的month-year提供月份选择器,结果为months。我知道我们可以将它存档在角度材料版本1.1.1中,但我们使用的是角度材料版本1.0.1。

的index.html

<!doctype html>
<html ng-app="datepickerBasicUsage">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.css">
</head>

<body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <md-content>
      <md-datepicker ng-model="birthdate" placeholder="Enter date" md-max-date="maxDate" ></md-datepicker>
    </md-content>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.1/angular-material.js"></script>
  <script src="app.js"></script>

</body>

</html>

app.js

angular.module('datepickerBasicUsage', ['ngMaterial'])
  .controller('AppCtrl', function($scope, $timeout) {
    $scope.birthdate = new Date();

    $scope.maxDate = new Date(
      $scope.birthdate.getFullYear(),
      $scope.birthdate.getMonth(),
      $scope.birthdate.getDate());

    $scope.open = function() {
      $timeout(function() {
        $scope.birthdate = new Date();
        $scope.maxDate = new Date(
          $scope.birthdate.getFullYear(),
          $scope.birthdate.getMonth(),
          $scope.birthdate.getDate());
      }, 400);
    }
  });  

0 个答案:

没有答案