Showing posts with label Date Filter. Show all posts
Showing posts with label Date Filter. Show all posts

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"}}


Read More

How to Use a Date Filter in AngularJS

02:21:00  , , ,  No comments

 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 










Read More