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.

Output:

👁 Image

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. 

Output: 

👁 Image

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