AngularJS - Can't show date object in view

Question

I'm trying to show a date object in my view.

I followed these docs: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D

But without success.

I literally have the same code: (EDIT: Removed controllerAs syntax and added $scope)

<input type="date" name="birthDate" ng-model="example.value"
   placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />

and my object:

$scope.example = {
     value: new Date(2013, 9, 22)
};

But still I get an error

Error: [ngModel:datefmt] Expected 2013-10-22 to be a date

Does anyone know what is causing this problem? I tried looking online but all the answers I found were saying the Date Object is invalid, which I'm pretty sure mine isn't. (or is it??)

EDIT:

Since a lot of people are having trouble understanding what my problem is, let me illustrate with a jsfiddle: http://jsfiddle.net/j2kof5at/

In the output I see 'dd-mm-2013' instead of '22-10-2014'. Why is this?

EDIT 2: (SOLUTION)

One of the solutions I tried was by adding angular-input-date module to my project. I just removed this from my project and it seems as if the problem is resolved. Reading the docs for this module I found:

The latest stable version of AngularJS (~1.2.26) has no support for input[type="date"]. The support was added only for 1.3 branch of Angular, which is now in beta.

Since I'm using angular 1.5.x there is already native support for this and this module was actually causing the problem. This also explains why my jsfddle isn't working, since that is using angular 1.0.1

No, that.example.value is basically $scope.example.value and using ControllerAs syntax with UserController as user — Max Taylor, Nov 14 '16 at 10:25
In the jsfiddle you provided, I see dd-mm-2013, instead of the actual date — Max Taylor, Nov 14 '16 at 10:25
http://stackoverflow.com/questions/14474555/how-to-format-a-date-using-ng-model — rani, Nov 14 '16 at 10:30
use this Link i think its help u http://stackoverflow.com/questions/14474555/how-to-format-a-date-using-ng-model — rani, Nov 14 '16 at 10:31
@Matheno Could you explain why? I'm not trying to do anything special. In the angular documentation they are also doing it so why can't I just output a simple date object? — Max Taylor, Nov 14 '16 at 10:51
I recreated your fiddle in AngularJS 1.5 and it works perfectly fine: https://jsfiddle.net/9bz4Lwxa/380/ — Matheno, Nov 14 '16 at 15:16
Yeah, my fiddle was using angular 1.0.1, which was why it wasn't working. Check my post edit for full explanation. Turns out I just shot myself in the foot by using a module that was supposed to fix the problem for me :') — Max Taylor, Nov 14 '16 at 16:09

score 0 · Answer 1 · answered Nov 14 '16 at 10:33

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

Might try this as a last resort, but I'm trying to learn why it's not working, and this isn't really helping. I have date STRING and I want to show it in the view as a Date object. This directive seems to be more for parsing the date in different types of output. — Max Taylor, Nov 14 '16 at 10:44

score 0 · Answer 2 · answered Nov 14 '16 at 10:37

0

Check the object ng-model="user.example.value" have you initialized the user object inside the controller.

//inside the controller

$scope.user= {}; $scope.user.example = {value: new Date("September 22, 2013")}

answered Nov 14 '16 at 10:37

Vinod kumar G

639
6
17

I know you're just trying to help me but have you even read my post? – Max Taylor Nov 14 '16 at 10:40
Yes i have. I am requesting you to check if the $scope.user = {} is mentioned inside the controller function – Vinod kumar G Nov 14 '16 at 10:47
It didn't change anything. My view is reading the correct variable, otherwise my error wouldnt know what my date is in "Error: [ngModel:datefmt] Expected 2013-10-22 to be a date". user.example.value = $scope.example.value – Max Taylor Nov 14 '16 at 10:50
Ok then create the date object in this way and check. – Vinod kumar G Nov 14 '16 at 10:55
$scope.example = { value: new Date(2013, 09, 22) }; – Vinod kumar G Nov 14 '16 at 10:55
Still not working. Once again: in terms of javascript, I have a valid Date object. new Date(2013, 09, 22), new Date("09/22/2013"), new Date(2013, 9, 22), new Date("September 22, 2013"), they all give me a valid Date object, but none of them is outputted. – Max Taylor Nov 14 '16 at 10:57
Please check this jsfiddle example and see if you are missing any object creation. [link] http://jsfiddle.net/lbclucascosta/8a7ppg4x/ as @lucas costla – Vinod kumar G Nov 14 '16 at 11:03
No. I'm not missing any object creation. I have told you this already. The jsfiddle is not showing 22-09-2013, All I see is: dd-mm-2013 – Max Taylor Nov 14 '16 at 11:06

Gaurav Srivastava · Answer 3 · 2016-11-14T10:48:24.077

0

angular.module('app', [])
  .controller('Controller', function($scope) {
      $scope.user = {};
    $scope.user.example = {
     value: new Date("September 22, 2013")
};
  })

<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
  <input type="date" name="birthDate" ng-model="user.example.value"
   placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required /> 

  </div>
</body>

</html>

edited Nov 14 '16 at 10:48

answered Nov 14 '16 at 10:40

Gaurav Srivastava

3,232
3
16
36

Thank you for trying to help, but no. I'm using UserController as user syntax (which is clearly stated in the question and mentioned in comments). – Max Taylor Nov 14 '16 at 10:46

score 0 · Answer 4 · answered Apr 05 '21 at 07:08

Here I will set the date of ng-model object to current date

The ng-model object:

<input id="AppointmentDate" type="date" ember-view" ng-model="Patient.AppointmentDate">

Inside your angular JS controller:

$scope.Patient = {};
$scope.Patient.AppointmentDate = new Date();

AngularJS - Can't show date object in view

4 Answers4