Convert date format in vue js with laravel

Question

I'm using verta library to convert gregorian dates to hijri date in laravel https://github.com/hekmatinasser/verta

in simple mode (.blade.php files) I'm using code like this:

{{ Verta($category->created_at)->format('%d %B %Y') }}
for converting {{created_at}}

but in Vue js I can't access to this format an I have

{{category.created_at}}

how can I convert the vue js dates with this method?

if you want to reuse what you are doing in laravel you will need to parse the dates before returning them to the frontend. you can use mutations (https://laravel.com/docs/5.8/eloquent-mutators) to do this automatically when reading database entries — Frnak, Mar 05 '19 at 09:24
https://stackoverflow.com/questions/46708110/convert-date-format-in-javascript-using-vuejs — Ajay Makwana, Mar 05 '19 at 10:38

score 6 · Answer 1 · answered Nov 02 '20 at 12:36

6

Simply, You can do it by follow three steps by moment.js.

Step 1:

npm install moment --save

Step 2:

import moment from "moment";

Step 3:

export default {
    data() {
        return {
            moment: moment
        }
    } }

Done.

Now do in below

 {{ moment(category.created_at).format("DD-MM-YYYY") }}

answered Nov 02 '20 at 12:36

Faridul Khan

1,741
1
16
27

1

This is perfect. Thanks! – Dhan Apr 05 '22 at 12:54
Welcome @dhan for your compliment. – Faridul Khan Apr 06 '22 at 05:54

score 1 · Accepted Answer · answered Mar 05 '19 at 09:27

1

You can use a mutator on your model to parse the date before returning it.

public function getCreatedAtAttribute($value)
{
    return Verta($value)->format('%d %B %Y');
}

This should be defined on your Category Model

{{category.created_at}}

Will then contain the already parsed date

answered Mar 05 '19 at 09:27

Frnak

6,601
5
34
67

Yes the best way is creating one attribute.. don't forget add it to the append array – Freddy Daniel Oct 13 '21 at 15:15
as created_at is an actual database field you don't need to append it (in this specific case / question) – Frnak Oct 14 '21 at 10:12

score 1 · Answer 3 · answered Dec 28 '21 at 07:08

1

In Laravel Side

1)
public function getCreatedAtAttribute($value)
{
    return $value->format('d-m-Y');
}

2)protected $casts = [
    'birthday'  => 'date:Y-m-d'
];

In Vue .js side make filters

npm install moment

In  resources/js/app.js

import moment from 'moment';

Vue.filter('formatDate', function(value) {
    if (value) {
        return moment(String(value)).format('MM/DD/YYYY')
    }
});

in Vue component side

{{ category.created_at | formatDate }}

answered Dec 28 '21 at 07:08

Talha Fayyaz

162
1
2

Vue 3 has deprecated filters - https://v3-migration.vuejs.org/breaking-changes/filters.html – JasonJensenDev May 14 '23 at 02:32

Victor · Answer 4 · 2023-05-23T14:29:31.793

0

You can use vue-moment.

npm install vue-moment

...and require the plugin like so:

Vue.use(require('vue-moment'));

Then, in your application you can do something like this:

{{ someDate | moment("dddd, MMMM Do YYYY") }}

Deprecated in Vue 3

edited May 23 '23 at 14:29

answered Sep 01 '21 at 16:22

Victor

995
1
10
26

1

Vue 3 has deprecated filters - https://v3-migration.vuejs.org/breaking-changes/filters.html – JasonJensenDev May 14 '23 at 02:32

Convert date format in vue js with laravel

4 Answers4