Angular Date filtering and formatting JSON Data

Angular Date filtering and formatting JSON Data

Today, We want to share with you Angular Date filtering and formatting JSON Data.
In this post we will show you Date filtering and formatting in Angularjs with Example, hear for AngularJS filter to format ASP.NET JSON Date we will give you demo and example for implement.
In this post, we will learn about Convert JSON date to JavaScript date in angular with an example.

Welcome to the In infinityknow.com website! You will Step By Step learn web programming, easy and very fun. This website allmost provides you with a complete web programming tutorial presented in an easy-to-follow manner. Each web programming tutorial has all the practical examples with web programming script and screenshots available.Date filtering and formatting in Angularjs with Example

Description

An Angularjs filter can be used in AngularJs simple expression using special char pipe sign on keyboards.
Now Here display is list of an example of AngularJS (using HTML and controller)inbuilt filter in angular lib simple date to format Javascript Date convert to more than readable date formats.
Here I shall show how to convert a(Date format) JSON date format to JavaScript date format to returned from server side to client side(Browser) an AngularJS applications.

There are Two types Usage:

1st : using HTML template

{{ date_expression_var | date : format : timezone}} // HTML

2nd : using Javascript

$filter(‘date’)(date, format(dd/mm/yyyy), timezone) // In controller

The date filter supports the below mentioned formats.

a) medium – date format in angularjs
b) short – date format in angularjs
c) fullDate – date format in angularjs
d) longDate – date format in angularjs
e) shortDate – date format in angularjs
f) mediumTime – date format in angularjs
g) shortTime – date format in angularjs

Example 1 : Simple AngularJS format date using date filter

<label> is Today Date</label>

File Name : app.js

$scope.infinityknowformatDate = function(ndate){
          var resultdateOutdate = new Date(ndate);
          return resultdateOutdate;
    };

Example 2 : Simple Example angularjs date format dd/mm/yyyy

  
    <h3></h3>
  
 
File Name : app.js
 
  var app = angular.module('infinityknow', []); // in init module

app.controller('ngdateMainCtrl', function($scope) { // in controller
  $scope.condate = '20170313T00:05:06'; //static date
});

Example 3 :

salesorder.date = $filter('date')(salesorder.date, "dd/MM/yyyy"); // for conversion to string
salesorder.resultstring = $filter('date')(salesorder.date, "yyyy-MM-dd");  // Simple for type="date" format binding in angularjs

Example 4 :

<div>
  <p>Simple date:yyyy/MM/dd/HH/mm/ss {{resultvalue | date:'yyyy/MM/dd/HH/mm/SS' }}</p>
  <p>Simple date:medium in angularjs Ex - {{resultvalue | date:'medium'}}</p>
  <p>Simple date:short in angularjs Ex  - {{resultvalue | date:'short' }}</p>
  <p>Simple date:fullDate in angularjs Ex  - {{resultvalue | date:'fullDate' }}</p>
  <p>Simple date:longDate in angularjs Ex  - {{resultvalue | date:'longDate' }}</p>
  <p>Simple date:mediumDate in angularjs Ex  - {{resultvalue | date:'mediumDate' }}</p>
  <p>Simple date:shortDate in angularjs Ex  - {{resultvalue | date:'shortDate' }}</p>
  <p>Simple date:mediumTime in angularjs Ex  - {{resultvalue | date:'mediumTime' }}</p>
  <p>Simple date:shortTime in angularjs Ex  - {{resultvalue | date:'shortTime' }}</p>
  <p>Simple date:mediumTime:UTC in angularjs Ex - {{resultvalue | date:'mediumTime':'UTC' }}</p>
</div>

<a href="http://yourprojectfolder/angular.min.js">http://yourprojectfolder/angular.min.js</a>

var ng4ex = angular.module('infinityknowApp', []); // init module
ng4ex.controller('ngdemoCtrl', function($scope) { // call controller
  $scope.resultvalue = new Date();
});

Example 5 : angularjs date format in controller

<div>
  <p>Demo date Format - {{resultvalue}} Good Job!!</p>
</div>

<a href="http://yourprojectfolder/angular.min.js">http://yourprojectfolder/angular.min.js</a>

var ng4ex = angular.module('infinityknowApp', []);
ng4ex.controller('ngdemoCtrl', function($scope, $filter) { // call a controller
  $scope.resultvalue = $filter('date')(new Date(), 'short');  // in date filter
});

Example 6 : Convert JSON date to JavaScript date in angular js

########  JSON Date format: /Date(milliseconds)/ #####################

angular.module('DateJsonExamplemodule', [])
  .controller('DateJsonCtrl', ['$scope', function($scope) {
    $scope.JsonSampleDate = '\/Date(1433913313004-0800)\/';
  }]);
  
  
angular.module('DateJsonExamplemodule', [])   // init module
  .filter('conjsondate', ['$filter', function ($filter) {
    return function (input, format) {
        return (input) 
               ? $filter('date')(parseInt(input.substr(6)), format) 
               : '';
    };
 }]);
 



  <title>Simple Angular JSON Date in controller Converter Filter Example</title>
  <a href="http://yourprojectfolder/angular.js">http://yourprojectfolder/angular.js</a>
  <a href="http://script.js">http://script.js</a>


  <h2>Example : Angular JSON Date format Converter to Filter Example</h2>
  <div>
    <div>
      Original JSON Date : {{JsonSampleDate}} Display
    </div>
    <h3>List of JavaScript dates in different formats :</h3>
    <div>{{ JsonSampleDate | conjsondate }} Is Today Date.</div>
    <div>{{ JsonSampleDate | conjsondate : 'yyyy-MM-dd' }} Is Today Date.</div>
    <div>{{ JsonSampleDate | conjsondate :'medium' }} Is Today Date.</div>
    <div>
      {{ JsonSampleDate | conjsondate : 'yyyy-MM-dd HH:mm:ss Z' }} Is Today Date.
    </div>
  </div>

demo :

http://plnkr.co/YXIzHzgPth2tzcJ2nS7M