CODEWITHSUNDEEP
javascripthtmlangularjsdate
Ryan Pereira
Ryan Pereira

Reputation: 105

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

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>

Upvotes: 0

Views: 781

Answers (1)

Ved
Ved

Reputation: 12093

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);
          }
        }
    }
});

Upvotes: 1

Related Questions