2017-01-30 8 views
0

3種類の入力要素に日付をロードするには:日付をロードするためには、このプラグインを使用することが可能である場合角度材料Iは、角材料datapickerとの基本的な例を持っている

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

私は、知っていただきたいと思います3つの異なる入力要素。

<input name="day" /> <input name="month" /> <input name="year" /> 
+0

あなたに彼らを静かに縛りたいですか? – Sajeetharan

+0

正確には、日付を選択すると、その日は入力に、月は別のものに、そして年は別のものに入れられます。 – Eladerezador

+0

私の答えを確認 – Sajeetharan

答えて

1

あなたは、ng-change上の選択した日付の値を取得し、日、月、年使用してJavaScriptを分割し、入力ボックスにバインドすることができ

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(); 
 
    } 
 
    });
<!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>

+0

良いアイデア、私はテストに行く、多くのおかあさん – Eladerezador

+0

それが役立つ場合、答えとしてマーク – Sajeetharan

+0

それはあなたが望むように動作しましたか? – Sajeetharan