Automatically Set Form Time Zone in Rails with Stimulus Controller

form_timezone_setting_with_stimulus.md

Setting a Form's Time Zone Using StimulusJS

First, create a new Stimulus controller. Here, we've title it time_zone_setter_controller.js. This controller does one thing: when the controller connects, it updates the value of the field target to the browser's reported time zone.

It reads:

import { Controller } from "@hotwired/stimulus"

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

  connect() {
    this.fieldTarget.value = Intl.DateTimeFormat().resolvedOptions().timeZone
  }
}

In your erb (or whatever) template, set up a hidden field to instantiate the controller and set it to the field target.

<%= form_with model: @user do |f| %>
  
  <%# All your other form fields... %>
  
  <%= f.hidden_field :time_zone, value: "UTC", data: { controller: "time-zone-setter", time_zone_setter_target: "field" } %>
  
<% end %>

Adjust the hidden field's name as needed.