0

I have an angular app where i am getting data from a service.

My controller app.js is as follows:

var app = angular.module('myapp', ['ui.bootstrap', 'jsonService']);
    app.controller('mycontroller', function(MyService, $scope, $modal, $log, $http) {
        $scope.profileid=3619;

        MyService.getItems($scope.profileid,function(data){
            $scope.profiledata = data;
        });
    });

The json object i get in the data looks as follows:

[
    {
        "profile_id": 3619, 
        "student_id": "554940", 
        "first_name": "Samuel", 
        "last_name": "Haynes",
        "date_of_birth": "2002-03-08T06:00:00Z"
    }
]

Here the date_of_birth is a DateTime field. When i am trying to display these values in a html as follows :

<label for="lastName">Student Last Name</label>
<input type="text" class="form-control" id="lastName" ng-model="profiledata[0].last_name" placeholder="Last Name" />

<label for="dob">Date of Birth</label>
<input type="date" class="form-control" id="dob" ng-model="profiledata[0].date_of_birth" />

Here, the last name displays fine in the textbox. But the date does not work. How do i display the values for the date?

Abhishek
  • 2,998
  • 9
  • 42
  • 93
  • 1
    See here:https://docs.angularjs.org/api/ng/input/input%5Bdate%5D You'll need to chop the time off. – Mike Cheel Aug 05 '14 at 04:08
  • i used a datetimelocal instead of just the date. Still its not showing up. Think something wrong in the json parameters? – Abhishek Aug 05 '14 at 04:17
  • After rereading the doc i linked it says it MUST be date object. Create a date object passing your date string to the constructor and then ng-model to that. – Mike Cheel Aug 05 '14 at 04:20

1 Answers1

1

In order for the date input to ingest the value, it first must be converted to a javascript Date object. So in this case, you would add the line $scope.profiledata[0].date_of_birth = new Date($scope.profiledata[0].date_of_birth); immediately after the $scope.profiledata = data; line.

bbone
  • 626
  • 5
  • 6
  • tried it! no luck though :( . was still showing me the placeholder..When i placed a debugger, the date was created properly in the $scope.profiledata[0].date_of_birth. But for some reason it was not showing in the html page – Abhishek Aug 05 '14 at 04:23
  • Did some more searching and actually stumbled across this similar SO post: http://stackoverflow.com/questions/18061757/angular-js-and-html5-date-input-value-how-to-get-firefox-to-show-a-readable-d – bbone Aug 05 '14 at 05:21