Format a Date using ng-model in AngularJS
Last Updated :
05 Sep, 2022
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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</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
Similar Reads
How to change the date format using AngularJS ? In this article, we will see how to change the date format using AngularJS. AngularJS provides 2 different ways to change the format of the date. It can be achieved by the following approaches: Using HTML Template BindingUsing JavaScript ControllerHTML Template Binding: In this method, we use the pi
3 min read
AngularJS ng-model-options Directive The ng-model-options directive has the feature which helps the user to modify, within the current application, the behavior of the ngModel directives. Basically, it is in use when the user has to control the binding of a variable and an HTML form element in the scope. You can also specify the amount
2 min read
AngularJS ng-model Directive The ngModel directive is a directive that is used to bind the values of the HTML controls (input, select, and textarea) or any custom form controls, and stores the required user value in a variable and we can use that variable whenever we require that value. It also is used during form validations.
4 min read
AngularJS | date Filter AngularJS date filter is used to convert a date into a specified format. When the date format is not specified, the default date format is 'MMM d, yyyy'. Syntax: {{ date | date : format : timezone }} Parameter Values: The date filter contains format and timezone parameters which is optional.Some com
2 min read
How to make Datepicker using Angular UI Bootstrap ? In this article, we will see how to make Datepicker using Angular UI bootstrap. Angular UI Bootstrap is an Angular JS framework created by Angular UI developers for providing better UI which can be used easily. Syntax: <div uib-datepicker></div> Download AngularUI from the link: https://
1 min read
mat-date-picker in Angular Material Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. In order to install it, we need to have angular installed in our project, once you have it you can enter the below command and can download it.Installa
2 min read