Level 102
I assume it's because if size? You could use dayjs. It's quite tiny https://day.js.org/
Nov 23, 2021
10
Level 4
Best way to format date without moment js in vue2?
Hi all,
Let’s say you have a date like this in a loop:
<ul>
<span v-for="item in data">
<li>
<small>{{item.created_at }}</small>
</li>
</span>
</ul>
item.created_at outputs: 2021-11-22 16:32:52
I would like to format it to: 22-11-2021
How can I do this in a loop without using moment.js please?
Thank you,
Level 4
@Sinnbeck Yes the size + it starts to give some errors about ISO format and their support is not responding much anymore. Other people on Reddit said that it was better to leave moment.js as it was not well maintained anymore. Thanks for this tiny Library, I am going to check it out now.
Level 80
@user1980 22-11-2021 isn’t really a recognised date format.
You’re better off using JavaScript’s native Date object to format the date as a localised format. That way, the user will see the date in a format they’ll recognise and be familiar with rather than your arbitrary reverse MySQL format.
Level 102
@martinbean totally agree. Unless the site is sort of intranet where everyone is in Europe
Level 80
@Sinnbeck Even then, just doing new Date(originalString).toLocaleDateString() will yield a date string formatted to the user’s locale.
2 likes
Level 102
@martinbean In Danish it will do 22.11.2021. :)
Level 4
@martinbean Thanks I will look into this
Level 4
@martinbean any idea how to pass this in vue when used in a a loop as I cannot get it to show anything when used like this: data.created_at comes from Laravel as DD-MM-YYYY(via model casting)
<div v-for="x in xx">
{{new Date(x.created_at).toLocaleDateString()}}
</div>
Thanks
Level 4
Ok, as I am using vue 2 and soon moving to vue 3, filters are out of the questions. I will have to use a computed property to deal with this it looks like
https://v3.vuejs.org/guide/migration/filters.html#_2-x-syntax
EDIT>>>>>.Method instead as it seems you cannot pass a parameter to a computed property
Level 102
If you don't want dependencies, you need to show one thing at a time using these functions
Please or to participate in this conversation.