format filter in angularjs
Html Code
<script src="angular.1.4.8.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyController">
<style type="text/css">
table, td, th {
border-collapse: collapse;
border: 1px solid red;
padding: 5px;
font-family: Calibri;
}
</style>
<h1>{{Title}}</h1>
<hr />
Rows : <input type="number" step="1" min="0" max="6" ng-model="MaxRow" /><br /><br />
<table id="DemoTable">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Salary</th>
<th>RegDate</th>
</tr>
<tr ng-repeat="x in DetailArray | limitTo:MaxRow">
<td>{{x.Name | lowercase}}</td>
<td>{{x.LastName | uppercase}}</td>
<td>{{x.Gender}}</td>
<td>{{x.Age | number:2}}</td>
<td>{{x.Salary | currency:"₹ ":1}}</td>
<td>{{x.RegDate | date:"yyyy/M/dd"}}</td>
</tr>
</table>
</div>
</div>
<script src="index.js"></script>
AngularJS Code
/// <reference path="angular.1.4.8.min.js" />
var ngapp = angular.module("MyApp", []);
ngapp.controller("MyController", function ($scope) {
$scope.Title = "DATA FORMAT FILTER";
var TempArray = [{ Name: "John", LastName: "Doe", Gender: "Male", Age: 45, Salary : "45210.265", RegDate: new Date("October 10 1987") },
{ Name: "Jennifer", LastName: "Dolle", Gender: "Female", Age: 12, Salary: "12000", RegDate: new Date("January 13 2010") },
{ Name: "Theon", LastName: "GreyJoy", Gender: "Male", Age: 32, Salary: "45628.321", RegDate: new Date("March 20 2011") },
{ Name: "Cersei", LastName: "Lannistor", Gender: "Female", Age: 15, Salary: "500", RegDate: new Date("April 23 2006") },
{ Name: "Rohini", LastName: "Devikar", Gender: "Female", Age: 20, Salary: "78000", RegDate: new Date("July 29 2005") },
{ Name: "Amit", LastName: "Shah", Gender: "Male", Age: 57, Salary: "106000", RegDate: new Date("December 5 1978") },
{ Name: "Narendra", LastName: "Modi", Gender: "Male", Age: 64, Salary: "1", RegDate: new Date("September 9 2015") }];
$scope.DetailArray = TempArray;
$scope.MaxRow = 3;
});
Formats
date
to a string based on the requested format
.format
string can be composed of the following elements:'yyyy'
: 4 digit representation of year (e.g. AD 1 => 0001, AD 2010 => 2010)'yy'
: 2 digit representation of year, padded (00-99). (e.g. AD 2001 => 01, AD 2010 => 10)'y'
: 1 digit representation of year, e.g. (AD 1 => 1, AD 199 => 199)'MMMM'
: Month in year (January-December)'MMM'
: Month in year (Jan-Dec)'MM'
: Month in year, padded (01-12)'M'
: Month in year (1-12)'LLLL'
: Stand-alone month in year (January-December)'dd'
: Day in month, padded (01-31)'d'
: Day in month (1-31)'EEEE'
: Day in Week,(Sunday-Saturday)'EEE'
: Day in Week, (Sun-Sat)'HH'
: Hour in day, padded (00-23)'H'
: Hour in day (0-23)'hh'
: Hour in AM/PM, padded (01-12)'h'
: Hour in AM/PM, (1-12)'mm'
: Minute in hour, padded (00-59)'m'
: Minute in hour (0-59)'ss'
: Second in minute, padded (00-59)'s'
: Second in minute (0-59)'sss'
: Millisecond in second, padded (000-999)'a'
: AM/PM marker'Z'
: 4 digit (+sign) representation of the timezone offset (-1200-+1200)'ww'
: Week of year, padded (00-53). Week 01 is the week with the first Thursday of the year'w'
: Week of year (0-53). Week 1 is the week with the first Thursday of the year'G'
,'GG'
,'GGG'
: The abbreviated form of the era string (e.g. 'AD')'GGGG'
: The long form of the era string (e.g. 'Anno Domini')format
string can also be one of the following predefined localizable formats:'medium'
: equivalent to'MMM d, y h:mm:ss a'
for en_US locale (e.g. Sep 3, 2010 12:05:08 PM)'short'
: equivalent to'M/d/yy h:mm a'
for en_US locale (e.g. 9/3/10 12:05 PM)'fullDate'
: equivalent to'EEEE, MMMM d, y'
for en_US locale (e.g. Friday, September 3, 2010)'longDate'
: equivalent to'MMMM d, y'
for en_US locale (e.g. September 3, 2010)'mediumDate'
: equivalent to'MMM d, y'
for en_US locale (e.g. Sep 3, 2010)'shortDate'
: equivalent to'M/d/yy'
for en_US locale (e.g. 9/3/10)'mediumTime'
: equivalent to'h:mm:ss a'
for en_US locale (e.g. 12:05:08 PM)'shortTime'
: equivalent to'h:mm a'
for en_US locale (e.g. 12:05 PM)
Reference - https://docs.angularjs.org/api/ng/filter/date
No comments