Hi I want to convert the mongo db created_at timestamp to when It says ... minutes/hours ago using the date-fns library. The function is called formatDistanceToNow which returns time since the date time provided. I'm using Vue for front end but can't seem to get it working.

<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 {
  puted: {
    ...mapState(['feed']),
    formatDate(timestamp){
      return formatDistanceToNow(timestamp)
    }
  }
}
</script>

The 2 mented lines of code is what I've tried, but keep getting the following error

Uncaught (in promise) 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. The function is called formatDistanceToNow which returns time since the date time provided. I'm using Vue for front end but can't seem to get it working.

<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 {
  puted: {
    ...mapState(['feed']),
    formatDate(timestamp){
      return formatDistanceToNow(timestamp)
    }
  }
}
</script>

The 2 mented lines of code is what I've tried, but keep getting the following error

Uncaught (in promise) RangeError: Invalid time value

• javascript
• mongodb
• vue.js
• timestamp
• date-fns

• Your feed variable is fetched in an async way, right? What if you try v-if="feed.length on the p tag with formatDate(post.timestamp)? – kissu Commented Jun 14, 2021 at 15:11
• Hi I'm actually using dummy data for the feed. Storing in a string => timestamp: '2021-06-12T12:59:57.337Z' – Sy3d Commented Jun 14, 2021 at 15:15

3 Answers 3

You cannot pass an argument to a puted function, so here you'll need to use a method. Also, the time format is indeed not okay as shown in the documentation page: https://date-fns/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).
To go from one to another, use 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>

This helped me fix the issue:

if (isNaN(newValue.getMonth())) return;
onChange(format(newValue, 'LLLL dd, yyyy', { locale: ru }));

In place of methods, you can use filters as follows;

<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>