How to display a Date in input type date in angular js?

Question

I have a JSON object which is sent from server:

{
    "make": "BA-101",
    "no_seat": "70",
    "company": "Ternote",
    "country": "British's",
    "destination": "Germany",
    "date":"2012-04-02"
}

The date key needs to be shown on the screen in input field as Date.I tried different formats to show the date however it gave an error Expected 15-01-2016 to be a date. The Angular explanation was to use a date modal but the Data is coming from a server in the "mm/dd/yyyy" format. how can i show it on the screen? here is my angular code to print the other fields.

<tr ng-repeat="planes in myPlane">
    <td><button class="btn btn-danger btn-remove" type="button"><i class="glyphicon glyphicon-trash gs"></i></button></td>
    <td><input type="text" class="form-control" ng-model="planes.make"></td>
    <td><input type="text" class="form-control" ng-model="planes.no_seat"></td>
    <td><input type="text" class="form-control"  ng-model="planes.company"></td>
    <td><input type="text" class="form-control"  ng-model="planes.country"> </td>
    <td><input type="text" class="form-control"  ng-model="planes.destination"></td>
    <td><input type="date" class="form-control" ng-model="planes.date"></td>
</tr>

Maybe you could try converting the value into an actual Date object, instead of working with a String object. — Haroldo_OK
– Haroldo_OK, Commented Dec 12, 2016 at 10:46
Make sure you are converting your string from your JSON to a date format. Expected error usually means the current datatype you are providing is wrong. Could try using $scope.planes.date = new Date(your-date-key); — Nikhil Nanjappa
– Nikhil Nanjappa, Commented Dec 12, 2016 at 10:49

Ved · Accepted Answer · 2016-12-12 10:48:08Z

1

You need to convert string to date object (planes.date = new Date(dateString)) and bind it to the ng-model.

Ex:

<input type="date" date-format class="form-control" ng-model="planes.date">

.directive('dateFormat', function(){
    return {
        scope : {
            ngModel : '='
        },
        link: function (scope) {
            if (scope.ngModel) {
             scope.ngModel = new Date(scope.ngModel);
          }
        }
    }
});

answered Dec 12, 2016 at 10:48

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

1 Comment

Ved Over a year ago

what? You need to use .directive inside JS file. Not HTML. here is docs.:docs.angularjs.org/guide/directive

Collectives™ on Stack Overflow

How to display a Date in input type date in angular js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related