Angular JS Magazine

duminică, 14 septembrie 2014

Custom Date Formatting

This tip shows you how to format date in Angular JS:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <style type="text/css">
        i {
            padding: 5px;
            font-size: 20px;
            display: block;
            font-family: Consolas;
        }
    </style>
    <script>
        angular.module("appModule", [])
                .controller("appCtrl", function ($scope) {
                    $scope.todayIs = new Date();
                });
    </script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
    Custom date 1 (shortDate filter): <i>{{ todayIs | date:'shortDate' }}</i>
    Custom date 2 (mediumDate filter): <i>{{ todayIs | date: 'mediumDate' }}</i>
    Custom date 3 (longDate filter): <i>{{ todayIs | date: 'longDate' }}</i>
    Custom date 4 (short filter): <i>{{ todayIs | date: 'short' }}</i>
    Custom date 5 (medium filter): <i>{{ todayIs | date: 'medium' }}</i>
    Custom date 6 (fullDate filter): <i>{{ todayIs | date: 'fullDate' }}</i>
    Custom date 7: <i>{{ todayIs | date: 'yyyy, dd MMMM' }}</i>
    Custom date 8: <i>{{ todayIs | date: 'd MMM y' }}</i>
    Custom date 9: <i>{{ todayIs | date: 'd-MM-y' }}</i>
    Custom date 10: <i>{{ todayIs | date: 'EEE, dd MMM y' }}</i>
    Custom date 11: <i>{{ todayIs | date: 'EEEE, dd MMM y' }}</i>
</div>
</body>
</html>

Output:
The date can be formatted against this image (source of this image is ng-book, by Ari Lerner):