Question

在选择日期之前，我只需要在md-datepicker上显示占位符文本。但是，当我向md-datepickeer发送空值时，默认显示当前日期。

这是我的angularjs控制器代码行，用于传递空日期

appCtrl.myDate = null;

这是我的html代码。

 <md-datepicker-custom name="dateField" 
                     ng-model="appCtrl.myDate" 
                     md-placeholder="Enter time" >
                     </md-datepicker-custom>

显示当前日期。我需要清除字段，并显示占位符文本。

screen shot example

Answer 1

您需要从配置中删除formatDate函数，然后占位符才能正常工作。

以下是代码段：

var app = angular.module('plunker', ['ngMaterial']);

app.config(function($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = formatDate;

  function formatDate(date) {
    return date ? moment(date).format('L') : '';
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.8/angular-material.min.css">
</head>

<body>

  <md-datepicker name="terminationDate" md-placeholder="Enter date" ng-model="vm.terminationDate">
  </md-datepicker>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>

  <!-- Angular Material Library -->
  <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
</body>

</html>

Answer 2

<md-datepicker
  name="terminationDate"
  md-placeholder="Enter date"
  ng-model="vm.terminationDate">
</md-datepicker>

请参考：http://plnkr.co/edit/O5ePYKyo1ILlheMz8KdO?p=preview 可能会对您有帮助。

最初在md-datepicker上显示占位符

2 个答案: