[英]Date-fns RangeError: Invalid time value
Hi I want to convert the mongo db created_at timestamp to when It says... minutes/hours ago using the date-fns library.嗨,我想使用date-fns库将 mongo db created_at 时间戳转换为...分钟/小时前的时间。 The function is called
formatDistanceToNow
which returns time since the date time provided. function 称为
formatDistanceToNow
,它返回自提供的日期时间以来的时间。 I'm using Vue for front end but can't seem to get it working.我在前端使用 Vue,但似乎无法正常工作。
<template>
<div class="feed">
<div v-for="post in feed" :key="post.id" class="post">
<h3>{{ post.name }}</h3>
<p>{{ post.timestamp }}</p> // return 2021-06-12T12:59:57.337Z
<p>{{ Date(post.timestamp) }}</p> // return Mon Jun 14 2021 16:02:22 GMT+0100 (British Summer Time)
<!-- <p>{{ formatDate(post.timestamp) }}</p> -->
<!-- <p>{{ formatDate(Date(post.timestamp)) }}</p> -->
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { formatDistanceToNow } from 'date-fns'
export default {
computed: {
...mapState(['feed']),
formatDate(timestamp){
return formatDistanceToNow(timestamp)
}
}
}
</script>
The 2 commented lines of code is what I've tried, but keep getting the following error 2 注释代码行是我尝试过的,但不断收到以下错误
Uncaught (in promise) RangeError: Invalid time value
Uncaught (in promise) RangeError: Invalid time value
You cannot pass an argument to a computed function, so here you'll need to use a method
.您不能将参数传递给计算得到的 function,因此在这里您需要使用
method
。 Also, the time format is indeed not okay as shown in the documentation page: https://date-fns.org/v2.22.1/docs/formatDistanceToNow此外,时间格式确实不正确,如文档页面所示: https://date-fns.org/v2.22.1/docs/formatDistanceToNow
2021-06-12T12:59:57.337Z
is not the same as Sat Jun 12 2021 14:59:57 GMT+0200 (Central European Summer Time)
(in my timezone). 2021-06-12T12:59:57.337Z
与Sat Jun 12 2021 14:59:57 GMT+0200 (Central European Summer Time)
(在我的时区)不同。
To go from one to another, use new Date("2021-06-12T12:59:57.337Z")
从一个到另一个到 go,使用
new Date("2021-06-12T12:59:57.337Z")
The final code is looking something like this最终的代码看起来像这样
<template>
<div>
format: {{ formatDate(test) }}
</div>
</template>
<script>
export default {
data() {
test: '2021-06-12T12:59:57.337Z',
},
methods: {
formatDate(timestamp) {
return formatDistanceToNow(new Date(timestamp))
},
}
}
</script>
In place of methods
, you can use filters
as follows;代替
methods
,您可以使用filters
,如下所示;
<template>
<div class="feed">
<div v-for="post in feed" :key="post.id" class="post">
<h3>{{ post.name }}</h3>
<p>{{ post.timestamp | formatDate }}</p> <!-- filter here -->
</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import { formatDistanceToNow } from 'date-fns'
export default {
filters: {
formatDate(timestamp){
if (!timestamp) return; // or return any placeholder
return formatDistanceToNow(timestamp);
}
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.