angular material date picker field value empty

Question

I want to get date of birth of a user, with predefined min and max date which is working fine. And the date format i want is DD-MM-YYYY, for this i have defined following in config;

app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
      $mdDateLocaleProvider.formatDate = function(date) {
         return moment(date).format('DD-MM-YYYY');
      }}]);

and the controller has

    $scope.user = {};
    $scope.user.dob = new Date();
    $scope.maxDate = new Date(
       $scope.user.dob.getFullYear() - 10,
       $scope.user.dob.getMonth(),
       $scope.user.dob.getDate()
    );
    $scope.minDate = new Date(
       $scope.user.dob.getFullYear() - 120,
       $scope.user.dob.getMonth(),
       $scope.user.dob.getDate()
    );

and the HTML is;

<md-datepicker 
 ng-model="user.dob" 
 md-placeholder="Enter date of birth"
 md-min-date="minDate" 
 md-max-date="maxDate">
</md-datepicker>

with this code the field shows current date by default, which i don't want,

i want the date field to be empty by default.

Also i want to get values in both ways as follows 1) date-month-year And 2) date-month-year hour-minutes-seconds

When i tried to get the value it shows this "09-11-2016T18:30:00.000Z"

i want either "09-11-2016" or "09-11-2016 18:30:00"

If i remove code written in config block then the field value does not show any date, but this prevents me from setting a particular date format. — Kamlesh Pawar
– Kamlesh Pawar, Commented Nov 10, 2016 at 15:22

Martin Eckleben · Accepted Answer · 2017-08-16 12:49:33Z

5

Your mdDateLocaleProvider doesnt check for null values.

Your Problem is:

app.config(['$mdDateLocaleProvider', function ($mdDateLocaleProvider) {
  $mdDateLocaleProvider.formatDate = function(date) {
     return moment(date).format('DD-MM-YYYY');
  }}]);

it needs to be something like:

$mdDateLocaleProvider.formatDate = function(date) {
   var m = moment(date);
   return m.isValid()? m.format('DD-MM-YYYY') : '';
};

Then you can set

$scope.user.dob=null;

And get an empty Datepicker.

edited Aug 16, 2017 at 12:49

answered Dec 13, 2016 at 12:39

Martin Eckleben

80210 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luca Argenziano · Accepted Answer · 2016-11-10 16:02:06Z

0

The problem is your ng-model. You're initializing it with the current date:

$scope.user.dob = new Date();

Simply empty this variable and you'll be good ;)

answered Nov 10, 2016 at 16:02

Luca Argenziano

1445 bronze badges

1 Comment

Kamlesh Pawar Over a year ago

i tried $scope.user.dob = ""; and $scope.user.dob = null; but both results in "Invalid date" and $scope.user.dob = undefined; shows current date

Collectives™ on Stack Overflow

angular material date picker field value empty

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related