Question

我想将从Google Firestore获得的时间戳转换为vueApp中的几天和几个月。

我得到一个像这样的Object { seconds: 1549843200, nanoseconds: 0 }

<template>
   <div v-for="note in notes" :key="note.id" class="note">
     <div class="note_dates">
       <span class="day">{{note.day}}</span>
       <span class="month">{{note.month}}</span>
       .........
</template>

<script>
export default {
  data() {
    return {
      notes: []
    };
  },

  methods: {},
  created() {
    notesCollection.get().then(querySnapshot => {
      querySnapshot.forEach(doc => {
        const query = {
          id: doc.id,
          content: doc.data().content,
          day: doc.data().created_on,
          month: doc.data().created_on
        };

        this.notes.push(query);
      });
    });
  }

值created_on是Firestore集合中的时间戳记

因此，在我的视图组件中，我只想回显时间戳中的日期和月份。

Answer 1

我认为您的用例不需要任何外部库。 Firestore时间戳有一个返回日期对象的方法，因此您可以做的是：

将时间戳转换为日期对象：

 const query = {
  id: doc.id,
  content: doc.data().content,
  date: doc.data().created_on.toDate()
};

https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp#todate

使用内置的Date方法获取数字日期和月份：

{{ date.getDate() }}和 {{ date.getMonth() + 1 }}

月份从0开始计数，因此12月为11

如果您想以其他方式设置日期格式，请先尝试使用Intl.DateTimeFormat。如果这不能满足您的需求，我会从date-fns中挑选一些满足您需求的东西。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat

https://date-fns.org/

Answer 2

从时间戳中获取seconds值，乘以1000得到ms值，然后使用Date()：

  let timestamp = { seconds: 1549843200, nanoseconds: 0 } // firebase data     
  let myDate = new Date(timestamp.seconds * 1000) // date object
  
  console.log(myDate)

您可以从那里提取月/日/年，或以其他方式格式化日期exactly as you would any other javascript Date object。

Answer 3

只需在上面丹尼尔的答案中添加...那里有几个日期库...我发现momentjs非常有用。

示例：

import moment from "moment"

let myDate = created_on.seconds * 1000 // Unix ms timestamp

let myDay = moment(myDate, 'x').format('dddd') // Monday
let myMonth = moment(myDate, 'x').format('MMM') // January

Full Documentation在这里

如何使用Vue Js将Firestore TIMESTAMPS转换为完整日期

3 个答案: