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。为了获得所需格式的日期，我不得不结合了几个“自定义”功能。

要设置本地时间，您只需使用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

我通过调用模板中的方法来使用矩。像这样：

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

在带有或不带有vue-moment的vue js中格式化我的日期

2 个答案: