Use the browser's timezone to localize timestamps for visitors using AlpineJS

app.js

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

Alpine.magic('dateTime', () => {
    return (utcString, options = {}) => {
        const defaults = {
            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
            dateStyle: 'medium',
            timeStyle: 'short',
            ...options
        };
        return new Intl.DateTimeFormat(window.appLocale ?? 'en-US', defaults).format(new Date(utcString));
    };
});

Livewire.start();

// use in blade: <span x-text="$dateTime('{{ $model->created_at->toISOString() }}')"></span>