如何將JSON字符串日期轉換為自定義格式日期？

Question

嗨，我想知道如何將響應中的JSON字符串日期轉換為“ 2016/8/24”格式。 我做了一個dateFilter.js，它沒有按我預期的那樣工作，所以這是我嘗試過的。

這是dateFilter.js（實際上不起作用。錯誤：數據遞歸）

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

這是通過服務獲取JSON的方式（ 代碼不完整，因為我想展示如何獲取響應。 ）

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

controller.js

(function initController() {

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

        //console.log(res.data);

        }
    });

最后將過濾器應用於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> 

因此，我將如何進行轉換？

最后說明：現在沒有過濾器：7/25/2016 12:00:00 AM要轉換為7/25/2016

幫助將不勝感激。

Answer 1

您可以先將字符串轉換為實際的日期，然后應用內置的日期過濾器：

在您的控制器中：

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

在您的html中：

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

另一個選擇是在過濾器中使用moment.js ：

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

此外，您的過濾器可能無法正常工作的原因是其名稱。 嘗試更改為其他任何內容，例如myDate 。

UPDATE

我想我知道您為什么recursion錯誤！ 這是因為您的自定義過濾器的名稱！ 您的過濾器稱為date ，角度的內置過濾器也稱為date 。 也許他們最終互相打電話並陷入了遞歸之中。 只需更改名稱即可解決問題。

Answer 2

只需嘗試此代碼。 我認為這可以解決您的問題：

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

角度過濾器：

.filter('dateFormat', function() {
    return function(dt) {
        var dt = new Date(dt);
        return (dt.getMonth()+1)+'/'+dt.getDate()+'/'+dt.getFullYear();
    };
  })

Answer 3

可以使用npm模塊moment.js實現。 我制造了一個小提琴。 看看這個。

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/