1

I have a date in utc format, I want to be able to show just the time, then just the day, month and year in a nicer way.

I'm receiving this: 2019-12-21T12:30:00Z

I want this: Saturday 21st December 2019

Then show this: 12:30 elsewhere.

Or even better, detect the users local time zone, so mine would be CET: 13.30

I've tried using vue-moment but I can't seem to change the received utc date to ISO_8601 and so below where I try to just show the time, it fails:

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>
artworkjpm
  • 1,255
  • 2
  • 19
  • 40
  • Maybe this helps: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString – Thomas Junk Dec 21 '19 at 08:59

2 Answers2

0

It's kind of tricky doing something like this since JS doesn't really handle Date's the best.. In order to get the date formatted like you wish, I had to combine a couple of 'custom' functions..

To set the local time, you should just have to use 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";
  }
}
Matt Oestreich
  • 8,219
  • 3
  • 16
  • 41
0

I used moment by calling a function to methods: from the template. Like this:

<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>
artworkjpm
  • 1,255
  • 2
  • 19
  • 40