我的日期来自数据库,如下所示: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日期时间转换为日期过滤器所期望的格式,所以我发送它然后抛出另一个然后“瞧”。
答案 0 :(得分:64)
您需要将日期字符串转换为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;
};
});
答案 1 :(得分:3)
您指定的日期格式错误YYYY
应为yyyy
,请查看documentation以获取其他示例。
此外,您尝试格式化的日期字符串与Angular的规范不匹配。
格式化为Date对象,毫秒(字符串或数字)或各种ISO 8601日期时间字符串格式的日期(例如yyyy-MM-ddTHH:mm:ss.SSSZ及其较短版本,如yyyy-MM-ddTHH:mmZ, yyyy-MM-dd或yyyyMMddTHHmmssZ)。如果字符串输入中未指定时区,则认为时间在本地时区。
无论您从哪里检索原始字符串,我建议您存储/尝试以其中一种格式检索它。
示例JSFiddle使用正确的格式。
答案 2 :(得分:0)
我为此创建了一个管道,如下所示
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;
}
}
答案 3 :(得分:0)
我创建了一个管道
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" }}
答案 4 :(得分:0)
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'}}