Question

我有一个角度材质数据贴纸的基本示例：

setCentralWidget(0);

我想知道，如果可以使用此插件在三个不同的输入元素中加载日期。

<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>

Answer 1

您可以在 ng-change 上获取所选日期值，并使用javascript分割日，月，年并将其绑定到输入框，

＆＃13;

angular.module('datepickerBasicUsage', ['ngMaterial'])
  .controller('AppCtrl', function($scope) {
    $scope.bind = function() {
      $scope.date = $scope.myDate;
      $scope.month = $scope.date.getUTCMonth() +1 ;
      $scope.day = $scope.date.getUTCDate() +1;
      $scope.year = $scope.date.getUTCFullYear();
    }
  });

＆＃13;

<!doctype html>
<html ng-app="datepickerBasicUsage">

<head>
  <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.4/angular-material.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">

  <script src="app.js"></script>
</head>
<body>
  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <form >
      <md-content>
        <md-datepicker ng-change="bind()" ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
        <md-input-container class="md-block">
          <label>label</label>
          <input required type="text" ng-model="month" />
        </md-input-container>
         <md-input-container class="md-block">
          <label>label</label>
          <input required type="text" ng-model="day" />
        </md-input-container>
         <md-input-container class="md-block">
          <label>label</label>
          <input required type="text" ng-model="year" />
        </md-input-container>
      </md-content>
    </form>
  </div>
</body>

</html>

＆＃13;

角度材质 - 在3个不同的输入元素中加载日期

1 个答案: