显示日期是一个 md-datepicker 字段

Posted 2023-05-09

【中文标题】显示日期是一个 md-datepicker 字段

【英文标题】：Display date is an md-datepicker field

【发布时间】：2018-10-07 22:54:44

【问题描述】：

日期来自我的 API。我需要在 md-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>

【问题讨论】：

md-datepicker 只是允许Date 对象而不是String

【参考方案1】：

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

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);
]);

h1 text-align: center;

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