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
How to add a date picker in form using HTML ? To add a date picker in a form using HTML, you can use the <input> element with the type attribute set to "date". A date picker is an interactive dropdown that makes it easy to choose the date from a calendar instead of typing it manually. In this article, we will learn how to add a date picke
2 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
How to Change input type="date" Format in HTML ? The <input> element with type="date" is used to allow the user to choose a date. By default, the date format displayed in the input field is determined by the user's browser and operating system settings. However, it is possible to change the format of the date displayed in the input field usi
4 min read
How to use moment.js to change date format in jQuery ? Using Moment.js to change date format in jQuery involves importing the Moment.js library and utilizing its functions to parse, manipulate, and format dates. You can easily convert dates into various formats by calling moment(date).format(desiredFormat) to display the date in your preferred format.mo
2 min read
How to Sort List by Date Filter in AngularJS ? AngularJS is a feature-based JavaScript framework that uses various tools to create dynamic single-page web applications. While developing the application we have the requirement to play with the data in AngularJS and sort this list of data by a date properly in descending order. This can be done us
5 min read