角度2管道

Question

我的日期来自数据库，如下所示：2013-11-21 17:43:20

我正在尝试使用Angular的日期过滤器将它们变成更漂亮的东西，但是......

{{Objected.created | date:'shortDate'}}

或

{{Objected.created | date:'YYYY'}}

...只是吐出原始日期时间字符串：2013-11-21 17:43:20。没有错误。我做错了什么？

更新我发现MySQL的默认日期时间与Angular的数据过滤器所期望的不兼容。我试图像这样在飞行中转换它，但它正在抛出错误：

<li ng-repeat="result in data">{{ new Date(result.Job.created).toISOString() | date:'shortDate'}}</li>

我怀疑我无法以我正在尝试的方式实例化Date类。错误是$ parse：语法错误。

更新

感谢@ m59的帮助，我得到了一些小的调整......

HTML：

<html ng-app="myApp">
...
{{Object.created | dateToISO | date:'shortDate'}}

JS：

var myApp = angular.module('myApp',[]);

myApp.filter('dateToISO', function() {
  return function(input) {
    input = new Date(input).toISOString();
    return input;
  };
});

这个自定义过滤器将默认的MySQL日期时间转换为日期过滤器所期望的格式，所以我发送它然后抛出另一个然后“瞧”。

Answer 1

您需要将日期字符串转换为Angular支持的内容，例如ISO 8601格式。你可以像这样转换它：

$scope.Object.created = new Date($scope.Object.created).toISOString();

<强> Live demo here (click).

要动态执行此操作，您需要自定义过滤器。的 Live demo here (click).

<强>标记：

<div>{{Object.created | dateToISO | date:'shortDate'}}</div>

<强> JavaScript的：

app.filter('dateToISO', function() { return function(input) { return new Date(input).toISOString(); }; });

更新

这是一种手动转换日期的简单方法（firefox）：

app.filter('badDateToISO', function() { return function(badTime) { var goodTime = badTime.replace(/(.+) (.+)/, "$1T$2Z"); return goodTime; }; });

Answer 2

您指定的日期格式错误YYYY应为yyyy，请查看documentation以获取其他示例。

此外，您尝试格式化的日期字符串与Angular的规范不匹配。

格式化为Date对象，毫秒（字符串或数字）或各种ISO 8601日期时间字符串格式的日期（例如yyyy-MM-ddTHH：mm：ss.SSSZ及其较短版本，如yyyy-MM-ddTHH：mmZ， yyyy-MM-dd或yyyyMMddTHHmmssZ）。如果字符串输入中未指定时区，则认为时间在本地时区。

无论您从哪里检索原始字符串，我建议您存储/尝试以其中一种格式检索它。

示例JSFiddle使用正确的格式。

Answer 3

我为此创建了一个管道，如下所示

import { Pipe } from "@angular/core";

@Pipe（{ 名称：'DateToIso' }）导出类DateToIso {

transform(value, args) {

var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;

var parts=value.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');

var converted = new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);

let newValue = converted.toISOString();

return newValue;

}

}

Answer 4

我创建了一个管道

import { Pipe } from "@angular/core";

@Pipe（{ 名称：DateToIso' }）导出类DateToIso {

transform(value, args) {

var regex=/^([0-9]{2,4})-([0-1][0-9])-([0-3][0-9]) (?:([0-2][0-9]):([0-5][0-9]):([0-5][0-9]))?$/;

var parts=value.replace(regex,"$1 $2 $3 $4 $5 $6").split(' ');

var converted = new Date(parts[0],parts[1]-1,parts[2],parts[3],parts[4],parts[5]);

let newValue = converted.toISOString();

return newValue;

}

}

然后在模板中使用

{{ p.sessionTimeFinish | DateToIso  |  date: "HH:mm" }}

Answer 5

角度2管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'toIso'
})
export class ToIsoPipe implements PipeTransform {
  transform(value: string): unknown {
    return value.replace(' ', 'T');
  }
}

// INPUT : "2020-08-20 09:00:20"
// OUTPUT : "2020-08-20T09:00:20"

示例

{{response.created | toIso | date:'MMM d, h:mm a'}}

无法格式化默认的MySQL日期时间

5 个答案:

更新

角度2管道

示例