TimezoneInputController

Timezone Input Controller

Automatically converts datetime-local inputs between user's local timezone and UTC storage. Converts UTC values to local time on page load, and converts back to UTC before form submission.

See /docs/10.3.2-timezone-input-controller.md for complete documentation.

Constructor

new TimezoneInputController()

Source
Example
<form data-controller="timezone-input">
  <input type="datetime-local"
         name="start_date"
         data-timezone-input-target="datetimeInput"
         data-utc-value="2025-03-15T14:30:00Z">
</form>

Methods

connect()

Initialize controller - detect timezone and convert UTC to local time

Source

convertUtcToLocal()

Convert UTC values to local timezone for input display Stores original and local values in data attributes for reset

Source

disconnect()

Cleanup on disconnect - remove event listeners and prevent memory leaks

Source

getTimezone() → {string}

Get current timezone being used

Source
Returns:

Current IANA timezone identifier

Type: 
string

handleReset(event)

Handle form reset - remove hidden inputs and restore original local values

Parameters:
NameTypeDescription
eventEvent
Source

handleSubmit(event)

Handle form submission - convert local times to UTC and create hidden inputs

Parameters:
NameTypeDescription
eventEvent
Source

updateNotice()

Update timezone notice elements

Source

updateTimezone(newTimezone)

Manually update timezone and re-convert all values

Parameters:
NameTypeDescription
newTimezonestring

IANA timezone identifier

Source