Format a Date using ng-model in AngularJS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
        Format a Date using 
        ng-model in AngularJS
    </title>
  
    <script src=
        "//code.angularjs.org/snapshot/angular.min.js">
    </script>
</head>
  
<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>
        <p>
            <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>
        </p>
    </div>
</div>
  
</html>

chevron_right


Output:

Example 2: In the following HTML code snippet, it is shown how to input date from the date picker menu and then express 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>
        Format a Date using 
        ng-model in AngularJS
    </title>
  
    <script src=
        "//code.angularjs.org/snapshot/angular.min.js">
    </script>
</head>
<center>
  
    <body ng-app="dateInputExample">
        <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>

chevron_right


Output:

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

full-stack-img




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.