Use a Date Filter in AngularJS
AngularJS, the “Date” filter formats a text to a given date format change to required format example: 'dd/MM/yyyy' using AngularJs Filter.
DEMO
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("MyAppp", []);
myapp.controller("MyController", function ($scope)
{
var cou = [
{course: "Asp.Net", doj: new Date("November 2012, 24") },
{ course: "Jquery", doj: new Date("December 12, 2014") },
{course:"JavaScript",doj: new Date("12 January 2000")}
];
$scope.Show = function (course)
{
$scope.cou = cou;
}
$scope.Clear = function (course)
{
$scope.cou = '';
}
});
</script>
</head>
<body ng-app="MyAppp">
<form id="form1" runat="server">
<div ng-controller="MyController" align="center">
<input type="button" value="SHOW" style="color:red" ng-click="Show(course)" />
<input type="button" value="CLEAR" style="color:red" ng-click="Clear(course)" />
<table>
<thead>
<tr style="color:deeppink"><th>Course Name</th><th>Date of Joining(Formating
Date)</th><th>Original Date</th></tr>
</thead>
<tbody>
<tr ng-repeat="course in
cou">
<td>{{course.course}}</td>
<%--
// Required Format--%>
<td>{{course.doj | date:"dd/MM/yyyy"}}</td>
<td>{{course.doj}}</td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
First add new webform - Add Angularjs controller with table datas with date format
Next - Bind Date format to Table using | (Pipe Symbol) for Filter to date format when button click
0 comments:
Post a Comment