python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
angularjs date format mvc 5

date format | date formats in angularjs

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>


The Example in detail as given below

The Angular code-sample

var app = angular.module('myApp', []);
        app.controller('myController', function ($scope) {
            $scope.date = new Date();
  });

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>



ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions