How to display the current date and time in AngularJS

How to display the current date and time in AngularJS

In this article, you'll learn how to display the current date and time in AngularJS application.

You can get current date and time with specific format like yyyy-mm-dd, dd/mm/yyyy, mm-dd-yyyy hh:mm:ss etc. You will display current date and time using angular js ng-bind directive.

You can see bellow example we use Date object for getting current date and time. So you can see bellow syntax, example, full example and also output bellow. let's see it and i hope it will help you.

Syntax:

{{ 'Date Object' | date: 'Date Format' }}

Example:

{{ CurrentDate | date: 'dd/MM/yyyy' }}

index.html:

<!doctype html>

<html>

<head>

  <title>How to get Current Date and Time in AngularJS? - ItSolutionStuff.com</title>

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<body ng-app='myapp'>


  <div ng-controller="myCtrl">

    <p>{{ CurrentDate | date:'dd/MM/yyyy'}}</p>

    <p>{{ CurrentDate | date:'MM/dd/yyyy'}}</p>

    <p>{{ CurrentDate | date:'dd/MM/yyyy HH:mm:ss'}}</p>

  </div>



</body>



<script type="text/javascript">



   var app = angular.module('myapp', []);



   app.controller('myCtrl', ['$scope', '$http', function ($scope, $http) {

      $scope.CurrentDate = new Date();

   }]);



</script>

</html>

Output:

02/07/2019

07/02/2019

02/07/2019 09:23:47

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Important reasons for developers to adopt Angular JS development

In the current scenarios, e-commerce companies are very keen to create an online impact. The web and app development market are at its peak of popularity. There is a high demand for web and app developers with a growing number of websites. Angular...

Top Web Application Developer

You can also contact a web application development company for your business but then why not to contact the best web application development company that can turn up your business and customer satisfaction ratio to sky touching heights.