Leverage moment.js for formatting dates within a Vue component

Question

Leverage moment.js for formatting dates within a Vue component

I am currently working on a Vue component that includes an input field with a date type:

<input
    type="date"
    name="start_date"
    id="start_date"
    v-model="absence.start_date"
>

Within my script, I am attempting to format the date for proper display:

<script>
    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

Unfortunately, the format from the API response is causing issues.

When I manually set the date, it works with this format:

start_date: '2021-01-01',

However, it gets overridden by the data from the API call. I have Moment.js installed in app.js, how can I utilize it to format the date from the API response?

EDIT

This is the API response:

{"success":true,"data":{"id":1,"start_date":"2021-07-24 00:00:00","end_date":"2021-07-25 00:00:00","notes":"Quis nisi repellendus ipsa. Eum asperiores sunt iusto exercitationem autem. Qui harum adipisci praesentium laboriosam. Fugit quasi voluptatem excepturi et non autem atque quibusdam. Sed aperiam molestias quaerat incidunt.","created_at":"2021-06-28T19:34:16.000000Z","updated_at":"2021-07-03T15:46:10.000000Z","status":1}}

javascript vue.js momentjs

Answer 1

Answer №1

If you want to achieve a similar result, you can use the following code snippet as a guide. View a working example here

Remember to ensure that you have installed Moment.js before proceeding

<input
   type="date"
   name="start_date"
   id="start_date"
   v-model="formattedStartDate"
>

// Ensure that Moment.js is properly installed

<script>
    import moment from 'moment'

    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        computed: {
            formattedStartDate() {
                return moment(this.absence.start_date).format('yyyy-MM-DD');
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

Answer 2

If you want to achieve a similar result, you can use the following code snippet as a guide. View a working example here

Remember to ensure that you have installed Moment.js before proceeding

<input
   type="date"
   name="start_date"
   id="start_date"
   v-model="formattedStartDate"
>

// Ensure that Moment.js is properly installed

<script>
    import moment from 'moment'

    export default {
        data() {
            return {
                absence: {
                    start_date: null,
                }
            }
        },
        computed: {
            formattedStartDate() {
                return moment(this.absence.start_date).format('yyyy-MM-DD');
            }
        },
        created() {
            const request = axios
                .get(`/api/absences/${this.$route.params.id}`)
                .then(response => {
                    this.absence = response.data.data;
                });
        }
    }
</script>

Answer 3

Answer №2

When using the

<input type="date">

element, it is important to note that only the date portion of an ISO date string is considered a valid value, even if the API data contains both date and time information:

{
  "start_time": "2021-07-24 00:00:00"
                            ^^^^^^^^
}

To extract the date from a string like this, you can easily use the String.prototype.split method on the space character, and then take the first element of the resulting array (which is the date):

const data = response.data.data
this.absence = {
  ...data,
  start_date: data.start_date.split(' ')[0]
}

Check out the demo for a practical example.

Answer 4

When using the

<input type="date">

element, it is important to note that only the date portion of an ISO date string is considered a valid value, even if the API data contains both date and time information:

{
  "start_time": "2021-07-24 00:00:00"
                            ^^^^^^^^
}

To extract the date from a string like this, you can easily use the String.prototype.split method on the space character, and then take the first element of the resulting array (which is the date):

const data = response.data.data
this.absence = {
  ...data,
  start_date: data.start_date.split(' ')[0]
}

Check out the demo for a practical example.

Leverage moment.js for formatting dates within a Vue component

Answer №1

Answer №2

Similar questions

How can Mbox content be loaded dynamically according to the selected option in a dropdown menu, instead of loading it when

Alter a data value using a method that is invoked during the mounted lifecycle hook

Unable to retrieve accurate information

Oops! Next.js Scripts encountered an error: Module '../../webpack-runtime.js' cannot be located

Tips for transferring JavaScript values to PHP through AjaxWould you like to learn how to

Unable to open Google Maps link within React application

"Centered in the middle of the screen, an animated

Is it possible to make the v-toolbar-title fixed within a v-navigation-drawer using Vuetify?

Can you eliminate the commas and turn it into a string?

Steps for checking if the specified row has been accurately filled out in a loop

Utilizing $store in field callback with VueJS and vue-form-generator

Tips for dynamically appending a string to a predefined variable in React

jQuery does not support animations for sliding up or down

JavaScript hovering drop-down feature

Having difficulty uploading an image to Facebook through the graph API

Storing the results of an Ajax call in a global variable

What is the best way to generate conditional test scenarios with Protractor for testing?

How can Vue.Draggable's draggable functionality be toggled on and off?

Using jQuery to implement tiered radio buttons styled with Bootstrap

Live streaming updates directly from Firebase