Timezones.md

Timezones

Two approaches to deal with timezones server- and client side.

Save timestamp in GMT, use JavaScript to get user timezone from browser settings and display dynamicall on website (see code samples)
Save timestamp in GMT, use JavaScript to detect user timezone from browser and store it. Also show a dropdown with all timezones for the user to choose from. Then use that to render DateTime on the server.

#js #date #datetime #intl #alpinejs

// get array of timezone strings
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/supportedValuesOf
const tz = Intl.supportedValuesOf('timeZone');
// => ['Africa/Abidjan', 'Africa/Accra', 'Africa/Addis_Ababa']
// @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions
const currentTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
// => 'Europe/Berlin'

Detect timezone

<input
  id="timezone"
  name="datetime[timezone]"
  value="Etc/UTC"
  x-data="{timeFormat: Intl.DateTimeFormat().resolvedOptions()}"
  :value="timeFormat.timeZone"
  readonly
>

Display DateTime with timezone

<time
	datetime="{{ $kirby->user()->LastLogin()->value() }}"
	x-data="{date: new Date($el.getAttribute('datetime'))}"
	x-text="new Intl.DateTimeFormat('{{ $kirby->language() }}', {
			dateStyle: 'long',
			timeStyle: 'long'
		}).format(date)"
>
	{{ $kirby->user()->LastLogin()->value() }}
</time>

marcus-at-localhost/Timezones.md