Why is my date input field in AngularJS throwing type error?

Question

The error occurs when I display the populated, editable form to the user (not when a user enters in data and submits). The data is coming from MySQL over REST/JSON in the service shown below:

HTML:

<input class="form-control" type="date" name="dateInput" id="dateOfBirth" 
                   ng-model="user.dateOfBirth">

CCONTROLLER:

.controller('EditCtrl', function ($scope, $routeParams, UserDetail, $window) {
        $scope.user = UserDetail.find({}, {'id': $routeParams.id});
}

SERVICE:

service.factory('UserDetail', function ($resource) {

    return $resource(
        'http://localhost:8080/ClearsoftDemoBackend/webresources/clearsoft.demo.users/:id',
        {id: '@id'},
    {
    find: {method: 'GET'},

    });
});

ERROR:

Error: [ngModel:datefmt] Expected 2010-05-13T00:00:00-04:00 to be a date

the input value is a string, not a date. you can call new Date(input.value) to get a real date object. — dandavis
– dandavis, Commented Nov 10, 2014 at 21:23
In the controller? Tried that and it seems to get overwritten ... Perhaps when a promise returns from service? — vt97john
– vt97john, Commented Nov 11, 2014 at 0:11

pdorgambide · Accepted Answer · 2016-03-11 12:21:40Z

AngularJS 1.3 adds to input [date | datetime-local ] fields a new formatter/parser that checks that the model is a Date Object and throw the datefmt exception.

if (value && !isDate(value)) {
    throw $ngModelMinErr('datefmt', 'Expected `{0}` to be a date', value);

This issue is not present at previos versions and I suggest get in consideration on upgrade to avoid big nightmares.

A workaroud is to reset default formatters/parser with a custom dateFormat directive and use momentjs to format,parse strings to Date.

define(['directives/directives','momentjs'], function(directives,momentjs) {
directives.directive('dateFormat', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attr, ngModelCtrl) {
          var format=attr.dateFormat;
          //Angular 1.3 insert a formater that force to set model to date object, otherwise throw exception.
          //Reset default angular formatters/parsers
          ngModelCtrl.$formatters.length=0;
          ngModelCtrl.$parsers.length=0;

          ngModelCtrl.$formatters.push(function(valueFromModel) {
             //return how data will be shown in input
              if(valueFromModel){
                 // For momentjs > 2.9 moment global va is not defined use momentjs instead of moment.
                  return moment(valueFromModel).format(format);
              }
              else
                  return null;
          });
          ngModelCtrl.$parsers.push(function(valueFromInput) {
              if(valueFromInput){
                  //For momentjs > 2.9 moment global va is not defined use momentjs instead of moment.
                  return moment(valueFromInput,format).toDate();
              }
              else 
                  return null;
          });
        }
      };
    });
});

UPDATE With momentjs > 2.9 take in consideration that the moment global var are not defined.

2.9 "Deprecation warning: Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release."

With AMD need use momentjs instead of moment. i.e:

return momentjs(valueFromModel).format(format);

After wasting whole day, finally, this solution works!! For input type datetime-local, I used date-format="YYYY-MM-DDTHH:mm" and got it working on Ionic app. Thanks for sharing.

Matthew Green · Accepted Answer · 2014-11-10 21:24:32Z

6

Its because that is not a valid date according to Angular. Check out the doc on input[date] for their note on date validation. For it to be a date it should be in the format of YYYY-MM-DD.

answered Nov 10, 2014 at 21:24

Matthew Green

10.4k4 gold badges40 silver badges57 bronze badges

3 Comments

Matthew Green Over a year ago

@vt97john This sounds like a separate question. You should write up a new one and include more of your code so that we can see what is going on with it.

vt97john Over a year ago

I added more code to the above. Where / how can I properly format the date?

vt97john Over a year ago

I finally got it working. My original attempt to format failed because it was overwritten after a promise returned from a service call. I had to do the formatting using a "transformResponse" on the service ($resource) response to get it to work. find: { method: 'GET', transformResponse: function (data) { data = angular.fromJson(data); data.dateOfBirth = new Date(data.dateOfBirth); return data; } }

Tristan · Accepted Answer · 2016-01-31 19:19:33Z

1

In your api

$date = date("Y-m-d");
$new_date = date("c",strtotime($date));
echo json_encode(array("date"=>$new_date));

In your controller

/* var date 
* this is value from your api
*/
$scope.date = new Date(date);

edited Jan 31, 2016 at 19:19

Tristan

3,3218 gold badges25 silver badges27 bronze badges

answered Jan 31, 2016 at 18:57

Same

111 bronze badge

Comments

Akash Saxena · Accepted Answer · 2016-04-28 12:07:54Z

1

For date value in an array one can use this as:

    var dates = [
      { id: "1" , date: "2015-04-20T11:24:20.882Z"},
      { id: "2" , date: "2015-05-20T11:24:20.882Z"},
      { id: "3" , date: "2015-06-20T11:24:20.882Z"},
    ];

      function dateStringToObject (data) {
        for(var i=0; i < data.length; i++ ){
          data[i].date = new Date(data[i].date);
          }

        return data;
      }

   dateStringToObject(dates);

answered Apr 28, 2016 at 12:07

Akash Saxena

1572 silver badges11 bronze badges

Comments

Pranay Dutta · Accepted Answer · 2015-11-24 12:08:31Z

0

Basically its not about the format, it want a valid new Date() object in ISO format ,so whatever you get response ,just do a new Date and angular will be happy , i got this when i parsed the exception message caused by angular

https://docs.angularjs.org/error/ngModel/datefmt?p0=2015-11-24

answered Nov 24, 2015 at 12:08

Pranay Dutta

2,5992 gold badges33 silver badges46 bronze badges

Collectives™ on Stack Overflow

Why is my date input field in AngularJS throwing type error?

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related