Get Only Date From Datetime In Angularjs
Last Updated : Mar 11, 2024
IN - Angular JS | Written & Updated By - Pragati
In this tutorial we will show you the solution of get only date from datetime in angularjs, here we defined some some information with datetime as a json array.
From that information we are going to separating date only and then printed all dates from array values.
It is done by using filter options in angularjs as we know filter used to converts date into a specified format as per we defined and for separation we used split() function.
Step By Step Guide On Get Only Date From Datetime In Angularjs :-
In our application we used filter() and split() function for getting date only from array of values. Filter() allow us to format the date to display on UI without changing original format.
Filters can be used with an expression or directives using pipe. Here we used that pipe with expression as referring date in data[] array and filter parameter as ‘dateOnly’.
In filter() function for separation date from datetime string we used split() function. This is splits a string into an array of substrings. Here we used (‘ ’) is used as a separator between words so its separated our datetime.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module("myApp", []).controller('ctrl',["$scope", function($scope) {
var data=[
{"user":"122","CreatedOn":"2015-09-01 13:17:22"},
{"user":"312","CreatedOn":"2021-09-10 13:27:56"}
];
$scope.datas=data;
}])
.filter("dateOnly", function(){
return function(input){
return input.split(' ')[0];
};
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="ctrl">
<div ng-repeat="data in datas">{{data.CreatedOn | dateOnly}}</div>
</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.
- Within controller we defined our function with $scope object first we created ‘data’ array with ‘user,CreatedOn’ values. Using $scope object array values stored to variable ‘datas’ .
- Then we defined filter method with parameter ‘dateOnly’ here we splitting date and time by split(‘ ’) and [0] refers date at index ‘0’, time in index ‘1’. Finally we returning date input to html block.
- 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 contains coding of entire website blocks and elements described here.
- Within a <div> tag we defined our ng-app namely ‘MyApp’ it defines our application and controller of application namely ‘ctrl’ by ng-controller directive.
- Another <div> tag created for using ‘ng-repeat’ iterates all array dates once to print on webpage browser. The ‘data.CreatedOn’ refers expression and ‘dateOnly’ refers filter name.
- When printing anything on webpage we need to use double curly braces within variable name. All <div> tag needs to close respectively.
- 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 get date only from datetime.
When we executing angularjs file some of those needs internet connection because we used some external library supports so we need to use internet connection when you’re facing problems.
Using angularjs method of filer() and split() support we gets date from array.
We can change those user defined array values by our own choice that is not affecting our program.
I hope this tutorial on get only date from datetime in angularjs helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
