Search code examples
javascripthtmlangularjsdatepickerangularjs-material

initially show place holder on md-datepicker

I need to show only the placeholder text on md-datepicker before selecting a date. But when I send a null value to md-datepickeer it default show the current date.

This is my angularjs controller code line to pass null date 

appCtrl.myDate = null;

This is my html code.

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

It show current date. I need to get clear field and it should show placeholder text.

screen shot example

Solution

  • You need to remove formatDate function from config, then placeholder is working.

    Here is the snippet:

    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>