Datetime input and time zone

Whilst I don’t have an answer for you on how to embed the timezone in the form, I have an alternative idea (which you might already be aware of!)

In you app.js, you have the following:

let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
  params: {_csrf_token: csrfToken}
})

You can add to the params the browser timezone, so

let liveSocket = new LiveSocket("/live", Socket, {
  longPollFallbackMs: 2500,
  params: {
    _csrf_token: csrfToken,
    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
  }
})

Then in the LiveView, you can do this

Phoenix.LiveView.get_connect_params(socket)

This would then output

%{
  ...
  "timezone" => "XXX"
}

And then, using that, you could potentially jam it into your changeset…

def changeset(struct, params, timezone) do
  struct
  |> cast(params, [:date_time])
  |> update_change(:date_time, fn date_time -> 
    date_time && DateTime.new!(DateTime.to_date(date_time), DateTime.to_time(date_time), timezone)
  end)
end

Can you embed the timezone or offset as a hidden field in your form?

I have been thinking about doing something like this, but I seriously dislike that the time zones need to be handled explicitly in the changeset functions. That is guaranteed to introduce a bug pretty much every time.

I agree that a hidden field is probably the way to solve this. In order to have a regular :utc_datetime work, the hidden field would need to contain the datetime with the time zone together, rather than be a separate field with just the timezone. I should probably give this a try when I have recharged my mental capacity

I’m mostly just surprised that nobody seems to have solved this properly before.

The information is not lost so much as it was never gained. The datetime-local inputs explicitly don’t validate the user’s local timezone. It’s literally just a timezone-free datetime input, I have no idea what they were thinking naming it that. Elixir’s NaiveDateTime is a much less confusing name.

Anyway, why not just have a “select timezone” dropdown? That’s the solution recommended in the Mozilla docs. For extra usability you can set the default to the user’s local timezone (a reply above showed how to retrieve it).

Pass the timezone in as a virtual field and then perform the conversion in the changeset.