显示日期是md-datepicker字段

时间:2018-04-27 06:32:09

标签: javascript jquery html angularjs datepicker

日期来自API,对我而言。我需要在md-datepicker字段中显示日期。我正在约会,但它没有显示在一个日期选择器中。

日期未在日期选取器中获取。任何人都可以告诉我们如何在datepicker字段中显示。

var app = angular
	.module('app', ['ngMaterial', 'md-steppers']);
  
  
 app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
 
$scope.dateBirth = new Date(2014, 3, 19);

                    var a = new Date($scope.dateBirth)
                    var day = a.getDate();
                    var month = a.getMonth() + 1;
                    var year = a.getFullYear();
                    $scope.anniversaryd = month + "/"+day+"/"+year;
alert($scope.anniversaryd);
 }]);
h1 {
  text-align: center;
}
<div ng-app="app" ng-controller="mainCtrl as vm">
  <h2>
    Selected Date: {{(anniversaryd | date) || 'null'}}
  </h2>
  </h2>
  <md-datepicker 
    ng-model="anniversaryd"
    md-date-filter="vm.isAvailable"
    ></md-datepicker>
</div>

1 个答案:

答案 0 :(得分:0)

您需要将Date个实例而不是string传递给md-datepicker

&#13;
&#13;
var app = angular.module('app', ['ngMaterial']);  
app.controller('mainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
    $scope.dateBirth = new Date(2014, 3, 19);
    $scope.anniversaryd = $scope.dateBirth;
    console.log($scope.dateBirth);
}]);
&#13;
h1 {text-align: center;}
&#13;
<link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl as vm">
  <h2>
    Selected Date: {{(anniversaryd | date) || null}}
  </h2>
  </h2>
  <md-datepicker 
    ng-model="anniversaryd"
    md-date-filter="vm.isAvailable"
    ></md-datepicker>
</div>
&#13;
&#13;
&#13;