Rails 7-8 Add Timezone support

app/javascript/controllers/timezone_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ["time"]

    connect() {
        this.convertToLocalTime();
    }

    convertToLocalTime() {
        this.timeTargets.forEach((element) => {
            const utcTime = new Date(element.dataset.utcTime)
            const newTime = utcTime.toLocaleString("en-US", {timeZone: "America/New_York"})
            element.innerText = newTime
        });
    }
}

views

app/views/rooms/show.html.erb

<div class="flex flex-col w-full items-center gap-4">
  <h1 class="font-bold text-4xl mx-auto">
    <%= @room.name %>
  </h1>
  <div id="messages" data-controller="timezone" class="min-w-[20rem] py-2 mx-[5rem] flex flex-col gap-2 h-[15rem] overflow-y-auto flex-col-reverse">
    <%= render @messages%>
    <%= turbo_stream_from @room %>
  </div>
  <%= render "messages/form", locals: {room: @room, message: @message}%>
</div>

app/views/messages/_message.html.erb

<div class="p-2 rounded-lg bg-slate-300">
  <%= message.content %>
  <div class="italic text-xs text-slate-700">
    <span>Sent at: </span>
    <span data-timezone-target="time" data-utc-time="<%= message.created_at.iso8601 %>">
    </span>
  </div>
</div>

secretpray/Rails Stimulus timezone.md