ASP.net 到 AngularJS 日期格式答案

【问题标题】：ASP.net to AngularJS date formatASP.net 到 AngularJS 日期格式
【发布时间】：2015-10-15 00:46:16
【问题描述】：

我有一个使用 AngularJS 来显示数据的 ASP.net 应用程序。我正在检索包含日期列的数据列表。当我使用 console.log 打印从服务器/数据库返回的数据时，我看到以“Thu Feb 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)”格式打印的日期。为什么服务器以这种格式返回日期？我怎样才能去更改日期格式？我希望格式为 DD/MM/YYYY HH:MM 这是我检索数据的一些代码：

public JsonResult GetEventList()
{
var result =    from e in db.events
                select new
                {
                                 event_id = e.event_id,
                                 event_name = e.event_name,
                                 event_date = e.event_date
                 }
return Json(result.ToList(), JsonRequestBehavior.AllowGet);
}

Json 响应如下所示：

{ event_id: 1, event_name: 'Event', event_date: 'Mon Jan 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)' }

【问题讨论】：

如何将日期信息从 ASP.NET 返回到客户端？
“我有一个 ASP.NET”... 一个 ASP.NET 什么？
GetEventList() 返回一个 json。你能在你的问题中显示 json 响应吗？
您的 json 响应没有双引号。 { "event_id": 1, "event_name": "Event", "event_date": "MonJan11201600: 00: 00GMT+1100(AUSEasternDaylightTime)" }
你的模型类事件中的 event_date 是什么数据类型？

标签： javascript asp.net angularjs date

【解决方案1】：

实际上你得到了：

Mon Jan 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)

您可以尝试向 Date 对象添加自定义格式，如下所示：

Date.prototype.formatMMDDYYYYHHMMSS = function () {
    return (this.getDate()) +
        "/" + ((this.getMonth() + 1) < 10 ? ("0" + (this.getMonth() + 1)) : (this.getMonth() + 1)) +
        "/" + this.getFullYear() +
        " " + this.getHours() +
        ":" + this.getMinutes() +
        ":" + this.getSeconds();
};

如何使用此功能：

使用长日期字符串设置日期变量。

var date = "Mon Jan 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)";

将日期转换为Date()。

date = new Date(date);

然后，通过使用date.formatMMDDYYYYHHMMSS()，您可以得到转换后的日期。

Demo with Javascript

var date = "Mon Jan 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)";

Date.prototype.formatMMDDYYYYHHMM = function() {
  return (this.getDate()) +
    "/" + ((this.getMonth() + 1) < 10 ? ("0" + (this.getMonth() + 1)) : (this.getMonth() + 1)) +
    "/" + this.getFullYear() +
    " " + this.getHours() +
    ":" + this.getMinutes();
};

var datea = new Date(date);
console.log(datea.formatMMDDYYYYHHMM());

在 AngularJS 中使用 $filter：

(function() {
  "use strict";
  var app = angular.module("myApp", []);

  app.controller("Controller", ["$scope", "$filter",
    function($scope, $filter) {

      $scope.eventList = [{
        "event_id": 1,
        "event_name": "Event",
        "event_date": "Mon Jan 11 2016 00:00:00 GMT+1100 (AUS Eastern Daylight Time)"
      }, {
        "event_id": 2,
        "event_name": "Event 2",
        "event_date": "Mon Jan 11 2016 15:48:00 GMT+1100 (AUS Eastern Daylight Time)"
      }];

      // Using the toDateTime $filter in the Controller.
      $scope.showDate = function(event) {
        console.log($filter("toDateTime")(event.event_date));
      };
    }
  ]);

  app.filter("toDateTime", function() {
    return function(x) {

      Date.prototype.formatMMDDYYYYHHMM = function() {
        return (this.getDate()) +
          "/" + ((this.getMonth() + 1) < 10 ? ("0" + (this.getMonth() + 1)) : (this.getMonth() + 1)) +
          "/" + this.getFullYear() +
          " " + this.getHours() +
          ":" + this.getMinutes();
      }

      return new Date(x).formatMMDDYYYYHHMM();
    };
  });
})();

<html data-ng-app="myApp">

<head>
  <title>Demo AngularJS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body data-ng-controller="Controller">
  <table>
    <thead>
      <tr>
        <th>
          event_id
        </th>
        <th>
          event_name
        </th>
        <th>
          event_date
        </th>
        <th>
          Show Date
        </th>
      </tr>
    </thead>
    <tbody>
      <tr data-ng-repeat="event in eventList">
        <td>{{event.event_id}}</td>
        <td>{{event.event_name}}</td>
        <td>{{event.event_date | toDateTime}}</td>
        <!-- Using the toDateTime $filter in the View. -->
        <td>
          <button data-ng-click="showDate(event)" type="button">Show Date</button>
        </td>
      </tr>
    </tbody>
  </table>
</body </html>

【讨论】：

【解决方案2】：

假设您在 ASP 方面的时间是 DateTime 格式，

从控制器的 ASP 中检索： "/日期(1441164289937)/"

过滤（在控制器端）：

.filter('convertDateTime', function($filter) {

    return function(input) {

        var timeFormat = 'dd MMM yyyy HH:mm'; //date format 

        if(input == null) { return "";}

        return $filter('date')(parseInt(input.substr(6)), timeFormat);

    };

})

您可以根据自己的喜好修改上面的以下javascript代码。但逻辑是一样的。但是您需要先将您的 DateTime 更改为 javascript Date。那里有很多例子。希望对您有所帮助。

【讨论】：