initially show place holder on md-datepicker
Question
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.
2 answers
solution1
0 ACCPTED 2018-10-31 04:29:40
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>
solution2
0 2018-10-31 04:33:26
<md-datepicker
name="terminationDate"
md-placeholder="Enter date"
ng-model="vm.terminationDate">
</md-datepicker>
Please refer this : http://plnkr.co/edit/O5ePYKyo1ILlheMz8KdO?p=preview It may help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.