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>
Go to live demo http://embed.plnkr.co/WFJYrM/preview
The Example
in detail as given below
The Angular
code-sample
var app =
angular.module('myApp',
[]);
app.controller('myController', function ($scope) {
});
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>
The out go to link : http://embed.plnkr.co/WFJYrM/preview
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|
