Another way to return the date/time without slicing after converting to ISOString?

Question

I have the following JSON string that I would like to extract the date and the time from:

{ "id": 1, "time": { "date": "2019-06-12 11:51:22.000000", "timezone_type": 3, "timezone": "UTC" }, "productCategory": "some cat", "kitchen": { "house": { "id": 555, "name": "bigHouse" }, "id": 55, "name": "smallKitchen", "country": "US" } }

I do it currently like this:


<tr v-for="(cabinet, i) in cabinets">
    <td>{{ cabinet.kitchen.id }}</td>
    <td>{{ cabinet.productCategory }}</td>
    <td>{{ getDate(cabinet.time.date) }}</td>
    <td>{{ getTime(cabinet.time.date) }}</td>
</tr>
<script>
const axios = require('axios');

export default {
    name: "Cabinets",
    data() {
      return {
          bedroom : this.$session.get('bedroom').id,
          cabinets: []
      }
    },
        mounted() {
        axios({
            method: 'GET',
            url: `/bedroom/${this.bedroom}/cabinets`
        })
            .then(response => {
                this.cabinets = response.data
            })
        },
    methods: {
        getDate(datetime) {
            return new Date(datetime).toISOString().slice(0,10);
        },
        getTime(datetime) {
            return new Date(datetime).toISOString().slice(11,19);
        }
    }
    }
</script>

The date works fine but the time doesn't. The date and time are retunred as follows respectivly: 2019-06-12 and 09:51:22. The time should have been 11:51:22. This is probably becasue I'm using the method Date() when trying to get the time but when I tried using Time() it gave an error:

[Vue warn]: Error in render: "ReferenceError: Time is not defined".

I, however, even if I could find a really simple fix for the time, really don't like this way with slicing and was searching for methods that does do this for me, because as you can see, slicing the string is malfunctioning already.

score 2 · Accepted Answer · answered Jul 30 '19 at 12:08

The reason you're getting that error is because there's no Time object in JavaScript.

A somewhat more robust method is Date's toLocaleTimeString(). You can use it in your getTime() method: new Date(dateTime).toLocaleTimeString().

Note that toLocaleTimeString() will display the time as specified by the user's machine's culture.

You can override this behavior, though.

score 0 · Answer 2 · answered Jul 30 '19 at 12:04

In short, no. Dates are notorious for being a bother to work with. I believe the most popular package is Moment.js. Ensure you store the dates to your database in standard ISO format, and then modify the dates on the front end after you pull them from the database.

bbsimonbb · Answer 3 · 2019-07-30T12:37:04.137

The "right" format for dates in JSON is ISO. I don't recognise your time object. Is it a standard format? In any case, because it's UTC, you can easily create an ISO date with string methods, parse it with the built-in Date object, then use toLocaleTimeString to format it. To parse, do this...

new Date(time.date.replace(" ","T") + "Z").toLocaleString({},{timeZone:"UTC"})
                                          .toLocaleDateString()
                                          .toLocaleTimeString()

Beware, don't just take your date string and feed it to the Date object. The timezone is not specified, so the parser might or might not assume it's a local datetime. The Z on the end of the iso string instructs the parser that it's UTC, which is what it says in your json.

Another way to return the date/time without slicing after converting to ISOString?

3 Answers3