正确格式化 AngularJS 的 ASP.NET MVC 日期

Posted 2023-04-13

【中文标题】正确格式化 AngularJS 的 ASP.NET MVC 日期

【英文标题】：Correctly format ASP.NET MVC dates for AngularJS

【发布时间】：2018-11-18 04:12:42

【问题描述】：

我正在使用 AngularJS 从 ASP.NET 服务器应用程序获取数据并将其显示在客户端。这是我得到的：

ProjectID │ CreatedOn
══════════╪══════════════════════
13241     │ /Date(1338364250000)/   
13411     │ /Date(1338370907000)/   

如您所见，日期显示不正确。我想将日期格式化为YYYY-MM-DD HH:MM:SS。我该怎么做？

---

html 视图：

<div ng-app ng-controller="FirstCtrl">
    <table>
        <thead>
            <tr>
                <td>
                    ProjectID
                </td>
                <td>
                    CreatedOn
                </td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="team in teams" class="thumbnail">
                <td>
                    team.ProjectID
                </td>
                <td>
                    team.CreatedOn
                </td>
            </tr>
        </tbody>
    </table>
</div>

动作方法：

public JsonResult GetUser()

   return Json(new  data = ProjectService.GetPrefixUsedCount(1).ToArray() );

返回的 JSON 结果：

"data":["ProjectID":13241,"CreatedOn":"\/Date(1338364250000)\/",
"ProjectID":13411,"CreatedOn":"\/Date(1338370907000)\/"]

【参考方案1】：

快速修复

如果无法在 MVC 中更改格式，您可以这样做：

 team.CreatedOn.slice(6, -2) | date: 'yyyy-MM-dd HH:mm:ss' 

关键位是.slice(6, -2)——它会修剪掉所有多余的垃圾，只留下纪元时间。

---

想要过滤器吗？

如果您经常使用它，您可能更喜欢自定义过滤器。这个包裹the existing date filter：

.filter('mvcDate', ['$filter', $filter =>
  (date, format, timezone) =>
    date && $filter('date')(date.slice(6, -2), format, timezone)
]);

现在只需将date 过滤器替换为我们的自定义过滤器：

 team.CreatedOn | mvcDate: 'yyyy-MM-dd HH:mm:ss' 

这是working example on JSFiddle。

【参考方案2】：

如下创建自定义过滤器：

app.filter("dateFilter", function () 
    return function (item) 
        if (item != null) 
            return new Date(parseInt(item.substr(6)));
        
        return "";
    ;
);

然后您可以在 HTML 中应用过滤器

<tr ng-repeat="team in teams" class="thumbnail">
<td>team.CreatedOn | dateFilter | date:"dd-MM-yyyy"</td>

希望对你有帮助。

【参考方案3】：

你应该看看

http://docs.angularjs.org/api/ng.filter:date

它为您提供了所有必要的工具，以您想要的格式修改和显示日期。

编辑：

您能否修改您的服务器以不将日期作为 Date(****) 发送，而只是 **** 就可以了...如果您将日期作为 Date(****) 发送，那么您就是剩下两个选项都不好。

评估日期。 NO eval.. 这对您的健康不利。 使用正则表达式的组合删除日期。同样，它可能......但不推荐。

为什么要把它送进去然后去掉呢？为什么不把它从服务器端本身拿出来呢？

【讨论】：

我试过这个 team.CreatedOn | date:'yyyy-MM-dd HH:mm:ss Z' 但仍显示相同 /Date(1338364250000)/

不知道如何去掉转义字符，请告诉我？

@AnilD 文档定义日期格式，从服务器传递有效格式或创建自定义过滤器，将您的数据解析为有效日期

“没有评估……这对你的健康不利。”我仍然喜欢这个评论。真正的建议！

【参考方案4】：

在您的 ASP.NET MVC 域模型中，有一个额外的属性可以呈现 angular 预期的格式。

 public string CreatedOnJson
         
             get
             
                 return JsonConvert.SerializeObject(CreatedOn, new javascriptDateTimeConverter()).Replace("new Date(","").Replace(")","");

             
         

这样您就可以使用角度日期过滤器以您喜欢的方式显示：

 team.CreatedOn | date:'yyyy-MM'