Vue JS - Retrieve date only

Question

I'm making an api call which retrieves a set of objects. One of the objects returns a date and time together like this:

createdAt: "2020-11-04 09:48:32"

This is where I display the date and time:

<template v-for="item in collectedTrash">
        <BeforeAndAfter v-if="item.isPresented === 1"                            
                        :key="item.username"
                        :avatarUrl="require('@/assets/img/images/[email protected]')"
                        :imageBefore="getImageUrl(item.imageUrlBefore)"
                        :imageAfter="getImageUrl(item.imageUrlBefore)"
                        :username="item.username"
                        :date="item.createdAt"/> This is where I get the date
</template>

Is there anyway that I can retrieve the date only, rather than the date and time?

rsaw · Accepted Answer · 2021-02-18 12:35:34Z

1

I am assuming you don't have access to the api and therefore have to process the date in your vue application.

Do you need the date as a date Object or is a string fine? If a string representation is enough, you could use a library such as Date fns and use the format function:

...
:date="format(new Date(item.createdAt), 'yyyy-MM-dd')"

Another option might be to only use the first 10 characters of the string you received as the date: date="item.createdAt.substring(0,9)"

answered Feb 18, 2021 at 12:35

rsaw

1441 silver badge14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David ROSEY · Accepted Answer · 2021-02-18 12:38:51Z

0

Did you try something like: :date="item.createdAt.substr(0, 10)"

answered Feb 18, 2021 at 12:38

David ROSEY

1,8152 gold badges11 silver badges24 bronze badges

Comments

Hannah · Accepted Answer · 2021-02-18 12:39:21Z

0

In my experience the easiest way to format datetimes in JS it to use the Moment.js library (https://momentjs.com/). You could reformat the datetime string before passing it to your child component.

Or, if you don't want to rely on a third-party library and you know that the datetime string will always be passed in that format, I suppose you could do item.createdAt.slice(0, 10).

answered Feb 18, 2021 at 12:39

Hannah

1,1436 silver badges5 bronze badges

1 Comment

rsaw Over a year ago

I also just recently discovered that moment is considered a legacy project Moment Status and moment.js advise to not use moment.js in new projects.

MinorFourChord · Accepted Answer · 2021-02-18 12:44:41Z

0

Moment.js can be very helpful with dates and times

Moment Docs

moment("String").format('L'); // 04/11/2020

answered Feb 18, 2021 at 12:44

MinorFourChord

2801 silver badge4 bronze badges

Collectives™ on Stack Overflow

Vue JS - Retrieve date only

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related