TimezoneInputController

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()

Description:

  • Initialize controller - detect timezone and convert UTC to local time

Source:

convertUtcToLocal()

Description:

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

Source:

disconnect()

Description:

  • Cleanup on disconnect - remove event listeners and prevent memory leaks

Source:

getTimezone() → {string}

Description:

  • Get current timezone being used

Source:
Returns:

Current IANA timezone identifier

Type
string

handleReset(event)

Description:

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

Source:
Parameters:
Name Type Description
event Event

handleSubmit(event)

Description:

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

Source:
Parameters:
Name Type Description
event Event

updateNotice()

Description:

  • Update timezone notice elements

Source:

updateTimezone(newTimezone)

Description:

  • Manually update timezone and re-convert all values

Source:
Parameters:
Name Type Description
newTimezone string

IANA timezone identifier