Ashane Alvis Ashane Alvis - 1 year ago 109
AngularJS Question

How do I convert JSON string date to a custom format date?

Hi I would like to know how do I convert the JSON string date which comes from a response to format like "8/24/2016". I made a dateFilter.js bit it didn't work out as I expected so here's what I tried.

Here's the dateFilter.js (Actually it didn't work. Error: data recursion)

(function () {

.filter('date', function ($filter) {

return function (input) {

if (input == null) {

return "";
var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');

return _date.toUpperCase();

Here's how I get the JSON with a service (The code is not complete since I want to show how did I get the response.)

function GetEmpDetails(successcallback, failcallback) {

var req = {
method: 'GET',
url: 'http://localhost:2222/api/GetEmployees/GetEmployeeDetails',
headers: {
'Content-Type': 'application/json'
$http(req).then(successcallback, failcallback);

The controller.js

(function initController() {

EmployeeService.GetEmpDetails(function (res) {
$scope.employeeDetails = JSON.parse(;



And finally applying the filter to html.

<table id="basic-datatables" class="table table-striped table-bordered" cellspacing="0" width="100">
<thead style="text-align:match-parent">
<th rowspan="1" colspan="1" style="width:195px">First Name</th>
<th rowspan="1" colspan="1" style="width:195px">Last Name</th>
<th rowspan="1" colspan="1" style="width:200px">Date Of Birth</th>
<th rowspan="1" colspan="1" style="width:100px">Gender</th>
<th rowspan="1" colspan="1" style="width:200px">Email</th>
<th rowspan="1" colspan="1" style="width:100px">Mobile</th>
<th rowspan="1" colspan="1" style="width:190px">Designation</th>
<th rowspan="1" colspan="1" style="width:200px">Date of Join</th>
<th rowspan="1" colspan="1" style="width:195px">NIC</th>
<th rowspan="1" colspan="1" style="width:100px">Dept. Name</th>
<tr ng-repeat="emp in employeeDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))" style="text-align:center">
<td>{{emp.DOB | date}}</td> //applying the filter
<td>{{emp.date_of_join | date}}</td> //applying the filter

So how would I do this is there's any other way of conversion.

Final note: right now without the filter: 7/25/2016 12:00:00 AM want
to convert to 7/25/2016

Help would be appreciated.

Answer Source

Just try this code. I think this solves your problem:

<td>{{emp.DOB | dateFormat}}</td>

Angular Filter :

.filter('dateFormat', function() {
    return function(dt) {
        var dt = new Date(dt);
        return (dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download