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 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

READ :  Laravel 6 Execute MYSQL query - Raw Queries in Laravel


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

READ :  Call to undefined function str_slug() in Laravel 6

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


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


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 :

[php] = $filter(‘date’)(, “dd/MM/yyyy”); // for conversion to string
salesorder.resultstring = $filter(‘date’)(, “yyyy-MM-dd”); // Simple for type=”date” format binding in angularjs


Example 4 :


Simple date:yyyy/MM/dd/HH/mm/ss {{resultvalue | date:’yyyy/MM/dd/HH/mm/SS’ }}

Simple date:medium in angularjs Ex – {{resultvalue | date:’medium’}}

Simple date:short in angularjs Ex – {{resultvalue | date:’short’ }}

READ :  laravel 5.8 change date format using carbon example

Simple date:fullDate in angularjs Ex – {{resultvalue | date:’fullDate’ }}

Simple date:longDate in angularjs Ex – {{resultvalue | date:’longDate’ }}

Simple date:mediumDate in angularjs Ex – {{resultvalue | date:’mediumDate’ }}

Simple date:shortDate in angularjs Ex – {{resultvalue | date:’shortDate’ }}

Simple date:mediumTime in angularjs Ex – {{resultvalue | date:’mediumTime’ }}

Simple date:shortTime in angularjs Ex – {{resultvalue | date:’shortTime’ }}

Simple date:mediumTime:UTC in angularjs Ex – {{resultvalue | date:’mediumTime’:’UTC’ }}


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


Demo date Format – {{resultvalue}} Good Job!!


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)
: ”;

Simple Angular JSON Date in controller Converter Filter Example

Example : Angular JSON Date format Converter to Filter Example

Original JSON Date : {{JsonSampleDate}} Display

List of JavaScript dates in different formats :

{{ JsonSampleDate | conjsondate }} Is Today Date.
{{ JsonSampleDate | conjsondate : ‘yyyy-MM-dd’ }} Is Today Date.
{{ JsonSampleDate | conjsondate :’medium’ }} Is Today Date.
{{ JsonSampleDate | conjsondate : ‘yyyy-MM-dd HH:mm:ss Z’ }} Is Today Date.


demo :

Leave a Reply

Your email address will not be published. Required fields are marked *