Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

latz's avatar
Level 3

Date and time format with api and vue

Hi, i have trouble with the beginning with vue. I need a simple form with title, date and time. Only these three details are needed. But i need german date format (dd.mm.YYYY).

A possibility is working with unix timestamp. I save this in the database und transform it in the lumen backend and vue frontend. This looks very difficult. Specially with vue. Or is it better to use the date string in all areas?

0 likes
6 replies
realrandyallen's avatar
Level 44

There's a lot of different ways to handle this but It's fairly simple to manipulate dates in vue if you pull in moment.js

https://momentjs.com/

Once setup you can do this in your vue component:

methods: {
    formatDate(date) {
        return moment(date).format('dd.mm.YYYY');
    },
}

You could also just format it in the php side as an accessor and send that along to your vue component and you wouldn't have to worry about formatting it in vue.

In some Model

...

protected $appends = ['some_date_formatted'];

public function getSomeDateFormattedAttribute()
{
    return Carbon::parse($this->some_date_field)->format('dd.mm.YYYY');
}

...

https://laravel.com/docs/5.7/eloquent-mutators#accessors-and-mutators

1 like
latz's avatar
Level 3

Many thanks for your reply.

I have problems in vue.

the form code has this row

<input type="text" class="form-control" v-model="newItem.tsmp" />

lumen delivers a timestamp. I have problems to convert the timestamp into german date.

This is not working:

<input type="text" class="form-control" v-model="newItem.tsmp | formatDate" />

Error: Property or method "formatDate" is not defined on the instance but referenced during render.

How can I solve this problem?

realrandyallen's avatar

@MLUTZ - It'd be like this:

<input type="text" class="form-control" v-model="newItem.tsmp" :value="formatDate(newItem.tsmp)" />
latz's avatar
Level 3

I've got an error, too.

:value="formatDate(newItem.tsmp)" conflicts with v-model on the same element because the latter already expands to a value binding internally

i get the data from the lumen backend

...
    this.$http.get('http://api.test/termin/' + id)
         .then(function (resp) {
               app.newItem = resp.data;
         })
---

perhaps, i have an error in reasoning??

realrandyallen's avatar

@MLUTZ - That's my fault, you'll have to handle it slightly different:

<input type="text" class="form-control" v-model="newItem.tsmp">
...
    this.$http.get('http://api.test/termin/' + id)
         .then(function (resp) {
        resp.data.tsmp = app.formatDate(resp.data.tsmp);
               app.newItem = resp.data;
         })
---
1 like
latz's avatar
Level 3

Yeah, you made my day. It works. Yesterday I tried a similar solution. But unfortunately with the wrong variables.

Great support @realrandyallen !

Thanks markus

1 like

Please or to participate in this conversation.