I use Livewire 2 and Alpine with Laravel 8.
I have an HTML table which display some informations of a list of Models, among these informations there are dates.
Dates are stored in timestamp without timezone in my database (as UTC) and my Laravel is configured to use UTC by default.
I need to display these dates in client local timezone, but the HTML table is displayed to users without the need to login, so I can’t store their timezone in a users table for example…
My table looks like this :
<table>
<thead>
<tr>
<th>actions</th>
<th>id</th>
<th>name</th>
<th>start date</th>
</tr>
</thead>
<tbody>
@foreach ($mymodels as $m)
<tr>
<td><button wire:click="startEdit({{ $m->id }})">EDIT</button></td>
<td>{{ $m->id }}</td>
<td>{{ $m->name }}</td>
<td>{{ $m->starts_at }}</td> {-- I need to display this in local timezone --}
</tr>
@endforeach
</tbody>
</table>
I don’t know what is the good way to do this.
Tell Livewire what is the timezone offset before displaying maybe? But how?
I was thinking about doing something like this in Alpine on a random div inside my component :
x-data x-init="$wire.set('timezone', -(new Date).getTimezoneOffset())"
But it doesn’t look good to me…
Also it’s just the first part of the problem, because as you can see in my table there is an Edit button, it opens a modal with an edit form. In this form, I want the user to type in the date in its local timezone, so I need to convert it to its timezone before assigning it with wire:model and I need to convert it back to UTC before saving it in database.
I didn’t find any good practice on how to handle this kind of thing on the Internet, any thought would be much appreciated.
Here is the StackOverflow link of this question:
