How to display the Greeting Message using current time in AngularJS ?

Last Updated : 28 Dec, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will see how to display the Greeting Message based on the current time using Angular JS, along with understanding their basic implementation through the illustration. To display the current time in different formats, Angular JS uses the same JavaScript Date() function. Generally, this date format renders the complete date format along with the time stamp in complete form. To display the date & time in a specific format, the various date filter options are used that truncate the complete format to the particular specified format. The following syntax is used to format the time.

Syntax: 

{{date_time | date: format: time zone}}

Where, the date_time is an AngularJS variable, the symbol | is used to filter date and time in a specified format, the symbol followed by 'date'  is used to access the current date and time, and 'format' may be

  • HH:mm:ss - 24 hours time Zone:minutes:seconds
  • hh:mm:ss  - 12 hours time Zone:minutes:seconds

Note: The first two characters are case sensitive, if it is 'HH' then it stands for 24 hours, or else of 'hh' it stands for 12 hours and the final value time zone may be of Coordinated Universal Time (UTC)  or  Greenwich Mean Time(GMT) the default format is GMT.

Depending upon the different available time zone, greeting messages like 'Good Morning', 'Good Afternoon', or 'Good Evening',  will be displayed.

Approach 1: In order to display the greetings message 'Good Morning', 'Good Afternoon' or 'Good Evening' depending on the current time, the $filter is used, and to display Live system time $interval is used. In this example $filter is extracting hours from the 'HH:mm:ss' format after that using the control statement, it displays the appropriate greeting message. The following code is used to display the current time.

$scope.TimeNow = new Date().toLocaleTimeString();

The below code is used to display Live time, which means the clock shows the current local time in seconds. The $interval service is used to increase the seconds counter for each 1000 millisecond. 

$interval(function () {
    $scope.TimeNow = new Date().toLocaleTimeString();
}, 1000);

Example: This example describes the rendering of the Greeting Message based on the current time in Angular JS.

HTML 
<!DOCTYPE html>
<html>

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

<body style="text-align: center">
    <div ng-app="myApp" 
         ng-controller="myCtrl">
        <h1 style="color: green">
            GeeksforGeeks</h1>
        <h3>
            Displaying the Current time
            with Greeting Message
        </h3>
        <p>Current Time: 
            <b>{{TimeNow}}</b>
        </p>
        <p>Greeting :
            <b> {{msg}}</b>
        </p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $interval, $filter) {
            $scope.TimeNow = new Date().toLocaleTimeString();
            $interval(function () {
                $scope.TimeNow = new Date().toLocaleTimeString();
            }, 1000);

            $scope.Hours = $filter('date')(new Date(), 'HH');
            if ($scope.Hours < 12)
                $scope.msg = "Good Morning"
            else if ($scope.Hourss < 15)
                $scope.msg = "Good Afternoon"
            else
                $scope.msg = "Good Evening..."
        });
    </script>
</body>

</html>

Output:

 

Approach 2: In this approach, the user will enter time input in the text box. The input value should be inbetween of 1 to 24 integer values. Based on the input value, the output greeting message will be displayed accordingly. Here the user input will be validated, where the integer value is not to be greater than 24 and less than 1.

Example: This is another example that will display the Greeting Message based on the current time in Angular JS.

HTML 
<!DOCTYPE html>
<html>

<head>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js">
    </script>
    <script>
        var mainApp = angular.module("mainApp", []);
        mainApp.filter('greet', function () {
            return function (input) {
                if (input < 12) {
                    return 'Good Morning';
                }
                else if (input >= 12 && input < 15) {
                    return 'Good Afternoon';
                }
                else if (input >= 15 && input < 19) {
                    return 'Good Evening';
                }
                else if (input >= 18 && input < 25) {
                    return 'Good Night';
                }
            };
        });
    </script>
</head>

<body ng-app="mainApp" 
      style="text-align:center">
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        Displaying the Greeting Message based 
        on current time in Angular JS
    </h3>
    <form name="f1">
        Enter 24 hours time in number : 
        <input type="number" 
               ng-model="value" 
               name="n1" 
               ng-min="1" 
               ng-max="24"><br>
        <span>{{value|greet}}</span>
    </form>
    <p ng-if="f1.n1.$error.max">
        number must be less than 25
    </p>
    <p ng-if="f1.n1.$error.min">
        number must be greater than 0
    </p>
</body>

</html>

Output:

 

Next Article
How to display the app version in Angular?
author
petriciaroseline
Improve
Article Tags :

Similar Reads