Question

我不确定我在做什么错。谁能指出我的错误？

dateMixin.js
`

import moment from 'moment'

export const dateMixin = {
  methods: {
    convertDate (date, format) {
      return moment(date, 'YYYY-MM-DD').format(format)
    }
  }
}

`

component.vue
这里date = 2019-06-11T15:28:07.226938-07:00

`

<template>
  <div>
    {{ convertDate(date, 'MM/DD/YYYY hh:mm A') }}
  </div>
</template>

<script>
import { dateMixin } from '../mixins/dateMixin.js'
export default {
  mixins: [dateMixin]
}
</script>

`
当前输出：06/11/2019 12:00 AM
预期输出：2019/6/11下午

谢谢！

Answer 1

您在以下行的混合（'YYYY-MM-DD'）中对解析格式进行了硬编码：

return moment(date, 'YYYY-MM-DD').format(format)

哪个日期字符串的第一部分（2019-06-11T15:28:07.226938-07:00）读为YYYY-MM-DD，而忽略其余部分。如果您删除了解析格式字符串，并允许其读取整个日期，即：

return moment(date).format(format)

...它将正确输出。看到它正常工作：

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#hook',
  template: '#appTemplate',
  data: () => ({
    date: '2019-06-11T15:28:07.226938-07:00'
  }),
  computed: {
    getTimezone() {
      return moment.tz.guess();
    }
  },
  methods: {
    convertDate(date, format) {
      return moment(this.date).format(format)
    },
    convertToUtc(date, format) {
      return moment(this.date).utc().format(format)
    }
  }
})

dl { font-family: monospace; }
dd { margin-bottom: 1rem; }
dt { font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.25/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/template" id="appTemplate">
  <div id="app">
    <dl>
      <dt v-text="getTimezone"></dt>
      <dd v-text="convertDate(date, 'MM/DD/YYYY hh:mm A')"></dd>
      <dt v-text="`UTC`"></dt>
      <dd v-text="convertToUtc(date, 'MM/DD/YYYY hh:mm A')"></dd>
    </dl>
  </div>
</script>
<div id="hook"></div>

否则，它将只读取日期，默认时间为00:00:00.000000（这就是为什么看到12:00 AM的原因）。

Momentjs：如何在Vue中使用mixin从utc日期获得正确的时间？

1 个答案: