CODEWITHSUNDEEP
angularjsangular-material
Chris L
Chris L

Reputation: 1061

Angular Material DatePicker date.toLocaleDateString is not a function

I am attempting to use the angular-material date picker and am getting the following error:

TypeError: date.toLocaleDateString is not a function
at Object.defaultFormatDate [as formatDate] (angular-material.js:6860)
at DatePickerCtrl.configureNgModel.ngModelCtrl.$render (angular-material.js:7184)
at Object.<anonymous> (angular.js:25233)
at m.a.$get.m.$digest (angular.js:15707)
at m.a.$get.m.$apply (angular.js:15986)
at g (angular.js:10511)
at L (angular.js:10683)
at XMLHttpRequest.A.onload (angular.js:10624)

I haave taken the example from the code pen here: https://material.angularjs.org/latest/#/demo/material.components.input

The relevant HTML Code:

            <div layout="" layout-sm="column">
            <md-input-container style="width:70%">
                <label>Company (Disabled)</label>
                <input ng-model="user.company" disabled="">
            </md-input-container>

            <md-datepicker ng-model="date" md-placeholder="Enter date"></md-datepicker>
        </div>

My Controller

$scope.date={};
$scope.$watch('date', function () {
    console.log($scope.date);
});

Upvotes: 4

Views: 10929

Answers (4)

Dan
Dan

Reputation: 830

Quite possibly your date object is not of type Date, make sure it is of that type only, not string or something else.

This is why I got this problem, and how I solved it. Hope this helps.

Upvotes: 0

Kildareflare
Kildareflare

Reputation: 4768

I had exactly the same problem, but the answers above did not help.

Initialising the datepicker with new Date() worked, but when attempting to initialise with value returned from the server I got the error above - despite them seemingly being in the same format.

In the end I had to explicitly create a Date object and then set it's value using Parse.

        var date = ctrl.data.fromServer;
        ctrl.data.fromServer= new Date();
        if (date != undefined)
        {
            ctrl.data.fromServer.setTime(Date.parse(date));
        }

Upvotes: -1

มด ย่อง
มด ย่อง

Reputation: 1

i have face this error because i'm trying to assign format string value to a model which is bind with md-datepicker which is hold javascript date type like this 

$scope.eventdate = $filter('date')($scope.eventdate, 'yyyy-MM-dd');

the solution is declare new model for md-datepicker and get its value like this

on js

$scope.eventdate = $filter('date')($scope.mddate, 'yyyy-MM-dd');

on html

 <md-datepicker ng-model="mddate" md-placeholder="Enter date" required></md-datepicker>

hope this can help you

Upvotes: -1

Mike Feltman
Mike Feltman

Reputation: 5176

toLocaleDateString is a native method of a date object, so it appears that your md-datepicker is not bound to a date. Without the HTML and the code that populates your data, it's hard to tell for sure, but that's the most likely reason.

Upvotes: 4

Related Questions