Hello friends, how are you? After lot of time we come back with newest post that “convert date to custom date”. All of you know that in development time date related issue is always occur because the format is different in all country.All country have their different date format so if your site usable in all country then you must manage the date format that country wise.In this post we will discuss on it , How to convert date to custom date. We have made this solution using angularjs. The angularjs is easy to learning and bind data on UI. You can learn angularjs from professional angularJs site. For this solution we have prefered angularjs and their bower components. BowerComponents are angular-Moment and second is Moment component. This component we have used in this solution.
Step 1: Open visual studio or visual studio code, you can create this solution in both editor visual studio code most of use with JavaScript language.In this solution, we prefer visual studio for this project.
Step 2: We need to create project folder (MomentJsDemo). After created project folder we must create sub-folders in project folder because of in this project we need to so many files, so we need to create sub-folders.
Step 3: we have create one scripts sub-folder in project folder and in this folder created one JavaScript(.js) file that is (app.js). this (.js) file is a Modular file. when you create project in AngularJs, you must create to Module, Controller and Service.
App.js
var app = angular.module ('angularMomentDemo',['angularMoment'])
Step 4: Modular file is created then create controller file. The controller is attached with the .html file if bind data in UI side (.html) you can bind data from the controller and the controller call to service for getting data from the server.You can create more than one controller in one controller (.js) file. In the controller, you can inject component like angular-moment.We have created angularMomentController.js controller file.
angularMomentController.js
app.controller ('angularMomentController', ['$scope’, function ($scope) {
}]);
Step 5: Two files are created one is an app.js file (modular) and second is a controller (angularMomentController).Now, install the bower component from bower site or using NuGet-package manager in visual studio. First of all download the (angular.js) file, this file is most important in an angular web application you must inject this file in main page.
The second component is angular-moment component and moment component. This component is required for this example. For converting date to custom date you can use angular-moment and moment component.
Step 6: All the (.Js) files are created and downloaded required components or packages then now we create html page their we can display our data. in html file we have display the converted date.
angularMoment.html
<! DOCTYPE html>
<html data-ng-app="angularMomentDemo">
<head>
<meta charset="utf-8">
<title>Angular MomentJs Example</title>
</head>
<body data-ng-controller="angularMomentController">
<!-- Angular scripts-->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/angular-moment/angular-moment.js"></script>
<script src="../scripts/app.js"></script>
<script src="../controller/angularMomentController.js"></script>
<div>
</div>
</body>
</html>
Step 7: You can see above we have injected the modular (data-ng-app=”angularMomentDemo”).
Second is controller inject (data-ng-controller=”angularMomentController”) in body tag.
The modular and controller is injected then now inject angularjs file(angular.js) and component files like (moment.js, angular-moments.js) and modular file(app.js) and controller file (angularMomentController.js) files.
Step 8: All the required files are injected in html file, now we see how to display date in format of (“DD MMM YYYY”). The actual date is “30/08/1993” but on UI side display like 30 AUG 1993.
For this operation we must define the date format in controller by variable of ( $scope.dateFormat).
app.controller('angularMomentController', ['$scope’, function ($scope) {
$scope.data = "30/08/1993";
$scope.dateFormat = "DD MMM YYYY";
}]);
Step 9: In controller, we have set data of date like($scope.data = "30/08/1993") and also set there dateFormat (DD MMM YYYY). Before use $scope variable, we must inject the $scope in controller function.
Step 10: Now, we bind the date of $scope.data from UI side and there we convert the date to formatted date. An “amParse” define which type of date will come and “amDateFormat” define the date formamentionsmention in which format date convert.
<! DOCTYPE html>
<html data-ng-app="angularMomentDemo">
<head>
<meta charset="utf-8">
<title>Angular MomentJs Example</title>
</head>
<body data-ng-controller="angularMomentController">
<!-- Angular scripts-->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/moment/moment.js"></script>
<script src="../bower_components/angular-moment/angular-moment.js"></script>
<script src="../scripts/app.js"></script>
<script src="../controller/angularMomentController.js"></script>
<div>
<h1>Today Date:</h1><h1>{{data |amParse:'DD/MM/YYYY'|amDateFormat: dateFormat}}</h1>
</div>
</body>
</html>
Step 11: Now, Run the application and see the result.
Hello, my name is Gautam Nagraj. I am one year old blogger.We create and find innovative solution.
No comments:
Post a Comment