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

时间:2013-04-19 12:46:59

标签: angularjs asp.net-mvc

我使用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)\/"}]

4 个答案:

答案 0 :(得分:14)

快速修复

如果在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

答案 1 :(得分:4)

创建自定义过滤器,如下所示:

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>

希望它有所帮助。

答案 2 :(得分:2)

你应该看看

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

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

编辑:

你可以修改你的服务器不发送日期作为日期(****)但只是****是好的...如果你发送日期作为日期(****),那么你是留下2个选项,两者都不好。

  1. 评估日期。没有评估......它对你的健康不利。
  2. 使用正则表达式的组合删除日期..再次,它可能..但不推荐。
  3. 为什么要发送它并将其剥离?为什么不把它从服务器端拿出来呢?

答案 3 :(得分:1)

在ASP.NET MVC域模型中有一个额外的属性,可以呈现角度所需的格式。

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

             }
         }

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

 {{team.CreatedOn | date:'yyyy-MM' }}