---

Search posts under AngularJS:

---

Date formatting in AngularJS

How to format date in AngularJS?

To format date and time in AngularJS,, we use date filter.

<script>
    var app = angular.module("app", []);
    app.controller("DateController", ["$scope", function ($scope) {
        $scope.ThisDate = new Date();
    }]);
</script>
<div ng-app="app" ng-controller="DateController">
    <div>
        <table class="table">
            <tr>
                <th>Demo Date time</th>
                <th colspan="2">{{ThisDate}}</th>
            </tr>
            <tr>
                <td>yyyy: </td>
                <td>{{ ThisDate | date: 'yyyy'}} </td>
                <td>4 digit year</td>
            </tr>
        </table>
     </div>
</div>

In the above code snippet, we have created a DateController and ThisDate as $scope property that will be used to format the date and time for this demonstration.

Notice the highlighted filter code in the above code snippet, the 'yyyy' is the format parameter value and that is giving the 4  digits year portion of the Date and time data.

Output

Similarly, change the format parameter value below and we can get desired result as shown below.