angularjs date format mvc 5

date format | date formats in angularjs

Hello everyone, I am going to share the code-sample for angular date format. In the below we can see the 12 type of angular date format. i.e.



    <p ng-bind="date | date:'MM-dd-yyyy'"></p>
    <p ng-bind="date | date:'MM/dd/yyyy'"></p>
    <p ng-bind="date | date:'MMM d, y h:mm:ss a'"></p>
    <p ng-bind="date | date:'M/d/yy h:mm a'"></p>
    <p ng-bind="date | date:'EEEE, MMMM d, y'"></p>
    <p ng-bind="date | date:'MMMM d, y'"></p>
    <p ng-bind="date | date:'MMM d, y'"></p>
    <p ng-bind="date | date:'M/d/yy'"></p>
    <p ng-bind="date | date:'h:mm:ss a'"></p>
    <p ng-bind="date | date:'h:mm a'"></p>
    <p ng-bind="date | date:'yyyy-MM-ddTHH:mm:ss.sssZ'"></p>
    <p ng-bind="date | date:'MM/dd/yyyy @ h:mma'"></p>


The Example in detail as given below

The Angular code-sample

var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.date = new Date();
  });

The HTML code-sample

<div ng-app="myApp" ng-controller="myController">
    <h3>AngularJs date format as given below.</h3>
    <p class="col" ng-bind="date | date:'MM-dd-yyyy'"></p>
    <p class="col" ng-bind="date | date:'MM/dd/yyyy'"></p>
    <p class="col" ng-bind="date | date:'MMM d, y h:mm:ss a'"></p>
    <p class="col" ng-bind="date | date:'M/d/yy h:mm a'"></p>
    <p class="col" ng-bind="date | date:'EEEE, MMMM d, y'"></p>
    <p class="col" ng-bind="date | date:'MMMM d, y'"></p>
    <p class="col" ng-bind="date | date:'MMM d, y'"></p>
    <p class="col" ng-bind="date | date:'M/d/yy'"></p>
    <p class="col" ng-bind="date | date:'h:mm:ss a'"></p>
    <p class="col" ng-bind="date | date:'h:mm a'"></p>
    <p class="col" ng-bind="date | date:'yyyy-MM-ddTHH:mm:ss.sssZ'"></p>
    <p class="col" ng-bind="date | date:'MM/dd/yyyy @ h:mma'"></p>
</div>

Full Live (HTML + Angular)demo code-sample

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS code-sample</title>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.angularjs.org/1.2.14/angular.js"></script>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.date = new Date();
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <h3>AngularJs date format as given below.</h3>
    <p class="col" ng-bind="date | date:'MM-dd-yyyy'"></p>
    <p class="col" ng-bind="date | date:'MM/dd/yyyy'"></p>
    <p class="col" ng-bind="date | date:'MMM d, y h:mm:ss a'"></p>
    <p class="col" ng-bind="date | date:'M/d/yy h:mm a'"></p>
    <p class="col" ng-bind="date | date:'EEEE, MMMM d, y'"></p>
    <p class="col" ng-bind="date | date:'MMMM d, y'"></p>
    <p class="col" ng-bind="date | date:'MMM d, y'"></p>
    <p class="col" ng-bind="date | date:'M/d/yy'"></p>
    <p class="col" ng-bind="date | date:'h:mm:ss a'"></p>
    <p class="col" ng-bind="date | date:'h:mm a'"></p>
    <p class="col" ng-bind="date | date:'yyyy-MM-ddTHH:mm:ss.sssZ'"></p>
    <p class="col" ng-bind="date | date:'MM/dd/yyyy @ h:mma'"></p>
</body>
</html>



ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.