如何在html中将日期和时间转换为特定格式

Question

我需要在 ng-repeat 中以特定格式显示日期和时间。

如果当前时间是上午 10 点，我从后端获取的日期值是“2017-04-03 05:00:07”到“5 小时”。

如果是前一天，那么我需要显示昨天。如果它提前 2 天或更长时间意味着我需要显示月份，如“Apr 03”。如果是上一年意味着我需要显示为“01/02/16”（dd/MM/yy）。

 <table>
  <tr ng-repeat="item in messages">
    <td><input type="checkbox" class="icheckbox_square-blue" ng-model="messagesinboxCheck">
    </td>
    <td class="mailbox-name"><a>{{item.from}}</a></td>
    <td class="mailbox-subject">{{item.messagebody.trunc(25)}}
    </td>
    <!--<td class="mailbox-attachment"></td>-->
    <td class="mailbox-type" ng-if="{{item.messagetype}} == 1">SMS</td>
    <td class="mailbox-type" ng-if="{{item.messagetype}} == 0">Email</td>
    <td class="mailbox-type" ng-if="{{item.messagetype}} == 2">SMS & Email</td>
    <td class="mailbox-date">{{item.updateddate}}</td>
  </tr>
</table>
<script>
var messages = {
  "json": {
    "response": {
      "statuscode": "0",
      "statusmessage": "Success",
      "data": {
        "inboxmessages": [{
          "modulereferenceid": 23671,
          "transactionid": 18969,
          "messagebody": "Testing message",
          "messagetype": 1,
          "createddate": "2017-04-03 05:00:07",
          "updateddate": "2017-04-03 05:00:07",
          "forward": false,
          "from": "dinesh",
          "deleted": false,
          "enablecomments": false,
          "url": "/GroupzMobileApp/inbox/avNTaab2hMaaaaeNar6yaaabwMaaanQa"
        }]
      },
      "lastsynchtime": "2017-04-04 06:14:09"
    }
  }
}
</script>

谁能帮助我，因为我是这个日期功能的新手。

Answer 1

<td class="mailbox-date">{{item.updateddate}}</td>

使用Angular Filter

示例：{{ 今天日期 | date : "dd.MM.yy" }} 如果 todayDate 是 2017 年 4 月 4 日，它将显示 "04.04.17"

Answer 2

我们可以使用指令来做到这一点，并比较日期并定义解决方案。

所以在你的 HTML 部分添加这个指令

<tr ng-repeat="item in messages" my-directive="item">

角度代码：

app.directive('myDirective', function($filter) {
return {
    restrict: "A",
    scope: {
        myDirective: '='
    },
    link: function(scope, element, attrs) {
        var date1 = new Date(scope.myDirective.updateddate);
        var date2 = new Date();
        var timeDiff = Math.abs(date2.getTime() - date1.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        if (diffDays == 1) {
            scope.myDirective.updateddate = 'yesterday'
        } else if (diffDays > 2 && diffDays <= 365) {
            scope.myDirective.updateddate = $filter('date') scope.myDirective.updateddate, 'dd-MMM');
    }
    else if (diffDays > 365) {
        scope.myDirective.updateddate = $filter('date') scope.myDirective.updateddate, 'dd-MM-YYYY');
} } }; });

希望对您有所帮助！