AngularJS Date function Format Date and Time in AngularJS

03:36:00  , ,  No comments

AngularJS Date function Format Date and Time in AngularJS

AngularJs Date filter concept access the UTC date format for various  changing and retrving 
 the required format very easily filter data from values using AngularJs.
The date filter  formats are.
fullDate
shortDate
longDate
medium
short
mediumTime
shortTime
 var cou = [

           {doj: new Date("November 21,2010")},
           {doj: new Date("December 12, 2014")},
           {doj: new Date("12 January 2000")}
           

            ];


 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 = [

            { doj: new Date("November 21,2010")},
            { doj: new Date("December 12, 2014")},
            { 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>Date of Joining(Formating Date)</th>
                <th>Original Date</th></tr>
        </thead>
        <tbody>
            <tr ng-repeat="course in cou">
              
                                                   <%-- // Required Format--%>
                <td>{{course.doj | date:"shortTime"}}</td>

                  <td>{{course.doj}}</td>            

            </tr>

        </tbody>
    </table>
    </div>
    </form>
</body>
</html>




 fullDate

{{course.doj | date:"fullDate"}}

 shortDate

{{course.doj | date:"shortDate"}}


 longDate
{{course.doj | date:"longDate"}}

 medium 

{{course.doj | date:"medium"}}



 short
{{course.doj | date:"short"}}


 mediumTime
{{course.doj | date:"mediumTime"}}


  shortTime
{{course.doj | date:"shortTime"}}


0 comments:

Post a Comment