AngularJS Date Format In Controller
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Ashish
In this tutorial we will show you angularjs date format in controller, here we used controller for change date format to specific user defined format.
When using controller to change date format we need to pass date as a string in angularjs we had option for make date to string then we can passed it.
For change format we need to use ‘$filter’ because it can filter value as a string and return expected format string without affecting original format.
Step By Step Guide On Angularjs Date Format In Controller :-
Here we used ‘$filter’ for change format of string. The $filter are used for formatting data to display on UI without changing the orginal format to the user.
They can be used in view templates, controllers or services. Angularjs comes with a collection of built-in filters but it is easy to define our own as well.
In our example we give format of date we want so the result will display as our defined format and also we can change to get any format of string date.
<!DOCTYPE html>
<html>
<head>
<title>
Date Format
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', ['$scope','$filter', function ($scope,$filter){
$scope.mydate=$filter('date')('2019-02-13',"dd/MM/yyyy");
}]);
</script>
</head>
<body ng-app="myapp" >
<div ng-controller="myctrl">
<p>2019-02-13</p>
<p>{{mydate}}</p>
</div>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- This file contains angularjs is distributed as a javascript file and added to webpage must added by using <script> tag.
- In controller scope we defined our application and hold by variable ‘app’ then controller added to application with $scope object, $filter parameters and function defined.
- In function we changing date to string format by ‘$filter(‘date’)’ then with that we specified some date value as reference with needed format.
- Our wanted date format denotes ‘dd/MM/yyyy’ so our sample date changed to this format and result stored to variable ‘mydate’.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here. We defined directive of ng-app namely ‘myapp’ it defines our application.
- Within a <div> tag we defined controller of application namely ‘myctrl’ by ng-controller directive. Here we displayed our result of ‘mydate’ value in <p> tag. In angularjs we need to print variable value between two curly braces. So our program will display on html webpage.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to change date format to specific format using angularjs.
In angularjs we achieve this too easily but in other languages will takes some time and complexity.
With the help of ‘$filter’ we can change date to another user defined format. It changing the date to string format and modified without affecting original format displayed result to webpage.
I hope this tutorial on angularjs date format in controller helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
