Open In App

Format a Date using ng-model in AngularJS

Improve
Improve
Like Article
Like
Save
Share
Report

The ng-model directive is used to bind the value of the input field to a property made in the controller. Formatters are used to convert the value of input from one textural representation to another desired representation. Formatters used for date formatting are useful when the date needs to be updated in various locations as per the country-specified formats. 

Syntax: The following attribute must be added within HTML tags as shown in the example below:

input type = "date" id = "exampleInput" 
    name = "input" ng_model = "example.value"

Usage:

input type = " date " 
      ng-model = " string " 
      [ name = " string " ] 
      [ min = " string " ] 
      [ max = " string " ] 
        [ ng-min = " " ] 
        [ ng-max = " " ] 
        [ required = " string " ] 
        [ ng-required = " string " ] 
        [ ng-change = " string " ]

The above-mentioned arguments are used as the input components in the ng module. In the below examples, we will see how some of these parameters are being used. 

Example 1: The first example shows how to change the format of a date. It is a simple HTML code where the ng-model value of your country format date is changed into some other country format date.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title> Format a Date using ng-model in AngularJS </title>
    <script src=
    </script>
</head>
  
<body>
    <div ng-app="gfg">
        <div ng-controller="dateCtrl" class="container">
            <script>
                angular.module('gfg', [])
                    .controller('dateCtrl', function($scope) {
                    $scope.firstDate = new Date();
                    $scope.secondDate = "2020-05-20";
                }).directive('date', function(dateFilter) {
                    return {
                        require: 'ngModel',
                        link: function(scope, elm, attrs, ctrl) {
                            var dateFormat = attrs['date'] || 'yyyy-MM-dd';
                            ctrl.$formatters.unshift(function(modelValue) {
                                return dateFilter(modelValue, dateFormat);
                            });
                        }
                    };
                })
            </script>
            <center>
                <h1 style="color: green">
                        GeeksforGeeks
                    </h1>
                <label for=""> Standard format for India </label>
                <input type="text" 
                       date='dd-MM-yyyy' 
                       ng-model="secondDate" 
                       class="form-control" />
                <p class="text-primary">
                    <label for=""> Standard format for Korea </label>
                </p>
 {{secondDate}} 
            </center>
        </div>
    </div>
</body>
</html>


Output:

 

Example 2: In the following HTML code snippet, it is shown how to input date from the date picker menu and then express it in a given format i.e. yyyy-mm-dd. Also, a validation check is provided to check if the date given by a user spans between the range required in the program or not. For the minimum and maximum date-values, we have used the “min” and “max” parameters as follows min = “{{minDate | date:’yyyy-MM-dd’}}” and max = “{{maxDate | date:’yyyy-MM-dd’}}”. Also, the “required” parameter sets the required validation error key if the value is not entered. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
       Format a Date using ng-model in AngularJS 
    </title>
    <script src=
    </script>
</head>
  
<body ng-app="dateInputExample" 
      style="text-align:center">
    <script>
        angular.module('dateInputExample', [])
            .controller('DateController', ['$scope',
            function($scope) {
                $scope.example = {
                    value: new Date(2020, 4, 25)
                };
            }
        ]);
    </script>
    <form name="myForm" 
          ng-controller="DateController as dateCtrl">
        <h1 style="color: green">
                GeeksforGeeks
        </h1>
        <label for="exampleInput"
            Pick a date in 2020: 
        </label>
        <input type="date" 
               id="exampleInput" 
               name="input" 
               ng-model="example.value" 
               placeholder="yyyy-MM-dd" 
               min="2020-01-01" 
               max="2020-12-31" required />
        <div role="alert"
            <span class="error" 
                  ng-show="myForm.input.$error.required">
                    Required!
            </span>
            <span class="error" 
                  ng-show="myForm.input.$error.date">
                    Not a valid date!
            </span
        </div
        <tt>
            value = {{example.value |
            date: "yyyy-MM-dd"}}
        </tt><br /> 
        <tt>
            Is valid date =
            {{myForm.input.$valid}}
        </tt><br /> 
    </form>
</body>
  
</html>


Output: 

Reference: https://docs.angularjs.org/api/ng/input/input%5Bdate%5D



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads