使用 AngularJS 无法正确显示日期答案

【问题标题】：Date doesn't appear correctly using AngularJS使用 AngularJS 无法正确显示日期
【发布时间】：2016-06-12 06:09:20
【问题描述】：

我正在使用 AngularJS 和 ASP.Net MVC 来显示用户的数据。当 MVC 视图启动时，它会调用 Angular 模块从数据库中获取数据：

<table class="table table-striped">
    <tr ng-repeat="p in products">
        <td>{{p.UserName}}</td>
        <td>{{p.UserDoB}}</td>
        <td class="text-right">
            <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button>
        </td>
    </tr>
</table>

在 Angular 控制器中，我只是向 MVC 操作方法发送了 ajax 请求：

$http.get('/Home/GetUser')
    .success(function (result) {
        $scope.users= result;
    })
    .error(function (data) {
        console.log(data);
    });

在GetUser方法中，同样是从数据库中读取的正常方法：

public JsonResult GetUser()
    {
        User userData = (User)Session["user"];            
        var db = new scaleDBEntities();
        return this.Json((from userObj in db.Users
                          join uc in db.UserContacts
                          on userObj.Id equals uc.usrID
                          join us in db.Users
                          on userObj.usrSupervisor equals us.Id
                          where userObj.Id.Equals(userData.Id)
                          select new
                          {
                              usrNme = userObj.usrNme,
                              usrdob = userObj.usrDoB,                                  
                          })
                          , JsonRequestBehavior.AllowGet
                        );
    }

如果您可以看到，usrDoB 是一个 SQL Server 数据库字段，它的数据类型是 Date。我的问题是，当我使用 SQL Server Management Studio 打开表时，日期值是正确的，但在使用 Angular 的应用程序上却不正确。

例如，日期12/28/1979 如下所示：/Date(315187200000)/??

有什么想法吗？谢谢

【问题讨论】：

对不起，我在上面的代码中有错误。在 HTML 代码块上，忽略单词 products 因为它实际上是 users
但我希望你有这个想法
问题与角度无关，与配置错误的 Newtonsoft Json.net 有关。

标签： angularjs asp.net-mvc date

【解决方案1】：

我找到了解决方案：

ngModel.$parsers.push(fromUser);  
ngModel.$formatters.push(toUser);

这样，我在绑定期间动态更改数据格式。

查看jsfiddle 中的完整解决方案，有关如何使用$parsers 和$formatters 的参考，请查看Parser and Formatters

【讨论】：

【解决方案2】：

Asp.Net MVC 控制器不使用 Newtonsoft Json.net 来构建 JsonResult，而是使用 JavaScriptSerializer。这就是日期格式不正确的原因。

最简单的解决方案是将您的操作移至 Web Api 控制器 (ApiController)，因此将使用 Newtonsoft Json.net。

另一种选择是创建自定义ActionResult。见例子here

【讨论】：

【解决方案3】：

您可以使用date = new Date(parseInt(date.substr(6))); 将 JSON 日期转换为 javascript 中的正确格式。这是一个完整的示例：

控制器：

public class Employee
{
    public int ID { get; set; }
    public DateTime DOB { get; set; }
}

public class HomeController : Controller
{
    public ActionResult AngularDates()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetDates()
    {
        var e1 = new Employee { ID = 0, DOB = new DateTime(1988, 10, 27) };
        var e2 = new Employee { ID = 1, DOB = new DateTime(1969, 05, 09) };
        var employees = new List<Employee> { e1, e2 };

        return Json(new { Employees = employees }, JsonRequestBehavior.AllowGet);
    }
}

查看：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type="text/javascript"></script>

<script type="text/javascript">
    angular.module('app', []);

    angular.module("app").controller('mainController', function ($scope, $http, $compile) {

        $scope.GetDates = function (employee) {

            $http.get("/Home/GetDates").
            success(function (data, status, headers, config) {

                debugger;
                data = data.Employees;

                for(var i = 0;i < data.length;i++)
                {
                    var employee = data[i];
                    var date = employee.DOB;
                    var formattedDate = new Date(parseInt(date.substr(6)));

                    var message = "Before - " + date + ". After - " + formattedDate;
                    alert(message);

                    data[i].DOB = formattedDate;
                }

                $scope.employees = data;


            }).
            error(function (data, status, headers, config) {

            });
        }
    });
</script>
<div ng-app="app">
    <div id="mainController" ng-controller="mainController">
        <input type="button" ng-click="GetDates()" value="Get Dates" />
        <table class="table table-striped">
            <tr ng-repeat="e in employees">
                <td>{{e.ID}}</td>
                <td>{{e.DOB | date:'yyyy-MM-dd'}}</td>
                <td class="text-right">
                    <button class="btn btn-danger" ng-click="deleteProduct(p)">X</button>
                </td>
            </tr>
        </table>
    </div>
</div>

在浏览器中的输出：

【讨论】：