使用或不使用 vue-moment 在 vue js 中格式化我的日期

Question

我有一个 utc 格式的日期，我希望能够只显示时间，然后以更好的方式显示日、月和年。

我收到这个：2019-12-21T12:30:00Z

我想要这个：2019 年 12 月 21 日星期六

然后在其他地方显示：12:30。

或者更好的是，检测用户本地时区，所以我的应该是 CET: 13.30

我尝试过使用 vue-moment，但似乎无法将收到的 utc 日期更改为 ISO_8601，因此在我尝试仅显示时间的下方，它失败了：

import Vue from "vue";
    import VueMoment from 'vue-moment';
    import moment from 'moment-timezone';
    import App from "./App.vue";
    import BootstrapVue from "bootstrap-vue";
    import router from "./router";
    import "./main.scss";

    Vue.use(BootstrapVue, VueMoment, {
      moment,
    })

...

  <table class="table table-responsive" v-for="(item, i) in fixtures" :key="i">
        <tr>
          <td>{{ item.utcDate | moment("hh:mm") }}</td>
        </tr>

Answer 1

这样做有点棘手，因为 JS 并不能真正处理最好的日期。为了得到你希望的日期格式，我必须结合几个“自定义”函数。

要设置当地时间，你应该只需要使用date.toLocaleTimeString()..

let theDate = new Date(Date.now());
let formattedDate = getFormattedDate(theDate);
let formattedTime = theDate.toLocaleTimeString();
console.log("formattedDate:", formattedDate);
console.log("formattedTime:", formattedTime);

function getFormattedDate(date) {
  return `${getDayName(date)} ${date.getDate()}${getDateOrdinal(date)} ${getMonthName(date)} ${date.getFullYear()}`
}

function getDayName(date) {
  // Customized from https://stackoverflow.com/questions/24998624/day-name-from-date-in-js
  return [
    'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
  ][date.getDay()];
}

function getMonthName(date) {
  // Customized from https://stackoverflow.com/questions/1643320/get-month-name-from-date
  return [
    "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
  ][date.getMonth()]
}

function getDateOrdinal(date) {
  // From https://stackoverflow.com/questions/15397372/javascript-new-date-ordinal-st-nd-rd-th
  let day = date.getDate();
  if (day > 3 && day < 21) return 'th';
  switch (day % 10) {
    case 1:  return "st";
    case 2:  return "nd";
    case 3:  return "rd";
    default: return "th";
  }
}

Answer 2

我通过从模板中调用 methods: 函数来使用 moment。像这样：

<template>
    <th>{{ callDate(item.utcDate, "fullDate") }}</th>
    <td>{{ callDate(item.utcDate, "time") }}</td>
</template>
    ...

    <script>
    import moment from "moment";
      methods: {
        callDate(date, dateType) {
          const date1 = new Date(date);
          if (dateType === "fullDate") {
            return moment(date1).format("ddd, MMMM Do YYYY");
          } else {
            return moment(date1).format("HH:mm");
          }
        }
      }
    };
    </script>