Angular bootstrap loading a date field into the html

Question

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?

See here:docs.angularjs.org/api/ng/input/input%5Bdate%5D You'll need to chop the time off. — Mike Cheel
– Mike Cheel, Commented Aug 5, 2014 at 4:08
i used a datetimelocal instead of just the date. Still its not showing up. Think something wrong in the json parameters? — Abhishek
– Abhishek, Commented Aug 5, 2014 at 4: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
– Mike Cheel, Commented Aug 5, 2014 at 4:20

bbone · Accepted Answer · 2014-08-05 04:19:35Z

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.

answered Aug 5, 2014 at 4:19

bbone

6265 silver badges6 bronze badges

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

2 Comments

Abhishek Over a year ago

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

bbone Over a year ago

Did some more searching and actually stumbled across this similar SO post: stackoverflow.com/questions/18061757/…

Collectives™ on Stack Overflow

Angular bootstrap loading a date field into the html

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related