如何将JSON字符串日期转换为自定义格式日期？

Question

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 () {

    angular
        .module('myapp')
        .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(res.data);

        //console.log(res.data);

        }
    });

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">
       <tr>
           <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>
   </thead>
   <tbody>
       <tr ng-repeat="emp in employeeDetails.slice(((currentPage-1)*itemsPerPage),((currentPage)*itemsPerPage))" style="text-align:center">
           <td>{{emp.fname}}</td>
           <td>{{emp.lname}}</td>
           <td>{{emp.DOB | date}}</td> //applying the filter
           <td>{{emp.gender}}</td>
           <td>{{emp.email}}</td>
           <td>{{emp.mobile_no}}</td>
           <td>{{emp.designation}}</td>
           <td>{{emp.date_of_join | date}}</td> //applying the filter
           <td>{{emp.nic}}</td>
           <td>{{emp.department_name}}</td>
       </tr>
   </tbody>
</table> 

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 1

You can first convert the string to actual Date and then apply built in date filter:

In your controller:

$scope.convertToDate = function(date){
      var dateOut = new Date(date);
      return dateOut;
};

In your html:

<td ng-bind="convertToDate(date) |  date:'MM/dd/yyyy'"></td>

Another option can be using moment.js in your filter:

 moment(input, 'MM/dd/yyyy')

Besides, the reason your filter might not be working is its name. Try changing to anything else, like myDate .

UPDATE

I think I know why you were getting recursion error! It is because of the name of your custom filter! Your filter is called date and the angular's built in filter is also called date . Maybe they ended up calling each other and got stuck in recursion. Just changing the name should do the trick.

Answer 2

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();
    };
  })

Answer 3

Can be achieved using npm module moment.js. i have created a fiddle. have a look at this.

var date = moment("7/25/2016 12:00:00 AM").date();
var month = moment("7/25/2016 12:00:00 AM").month();
var year = moment("7/25/2016 12:00:00 AM").year();
console.log(''+month+'/'+ date + '/'+ year);

https://jsfiddle.net/Refatrafi/1jq7o2uq/