<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="181299" data-post-id="181299">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="konstantine" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/konstantine/120/13605_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  konstantine
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>No plug involved, the JS-triggered GET request calls a controller function:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  def timezone(conn, %{"iana" =&gt; iana}) do
    cond do
      get_session(conn, "tmzn") -&gt; text(conn, "action skipped")
      Enum.member?(Timex.timezones(), iana) -&gt; conn |&gt; put_session("tmzn", iana) |&gt; text("action successful")
      true -&gt; text(conn, "action failed")
    end
  end

</code></pre>
<p>Then a function like the one below may be called from any Phoenix view:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  def local_datetime(conn, datetime) do
    {datetime, prefix} = if tmzn = get_session(conn, "tmzn"), do: {Timex.Timezone.convert(datetime, tmzn), ""}, else: {datetime, "⦗UTC⦘ "}
    [prefix, Timex.format!(datetime, "{h24}:{m}:{s} on {Mshort} {D}, {YYYY}")] #   unrecognized timezone or no timezone information ↑
  end

</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="181299" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/displaying-utc-datetime-in-users-browser-timezone/28361/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-181299" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="181299"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="181318" data-post-id="181318">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="belaustegui" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/belaustegui/120/36580_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  belaustegui
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I also prefer this approach of rendering UTC in the server and making the transformation to the user’s timezone in the client.</p>
<p>You may also want to take a look at <a href="https://github.com/github/time-elements" rel="noopener nofollow ugc">github/time-elements</a>, which can do this automatically for you using WebComponents.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="181318" data-batch-url="/posts/batch_likers">
                        3
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/displaying-utc-datetime-in-users-browser-timezone/28361/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-181318" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="181318"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="181324" data-post-id="181324">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="webuhu" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/webuhu/120/11495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  webuhu
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>In plain JavaScript it could possibly break down to the following:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;time id="updated-at" datetime="2020-06-30 12:21:17Z"&gt;&lt;/time&gt;
&lt;script&gt;
  const element = document.getElementById('updated-at');
  element.innerText = new Date(element.getAttribute('datetime')).toLocaleString();
&lt;/script&gt;
</code></pre>
<p>Edit: Thanks <a class="mention" href="/u/lostkobrakai" rel="nofollow">@LostKobrakai</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="181324" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/displaying-utc-datetime-in-users-browser-timezone/28361/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-181324" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="181324"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="181325" data-post-id="181325">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>There’s a <a href="http://developer.mozilla.org/en-US/docs/Web/HTML/Element/time" rel="nofollow"><code>&lt;time&gt;</code></a> tag in html, which is more appropriate than a plain span.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="181325" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/displaying-utc-datetime-in-users-browser-timezone/28361/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-181325" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="181325"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #14"></div>
  </section>
</div>
    <div class="postbit" id="188062" data-post-id="188062">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="webuhu" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/webuhu/120/11495_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  webuhu
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Modified version I’m using with LiveView now :</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;time id="updated_at" datetime="2020-06-30 12:21:17Z"&gt;&lt;/time&gt;
&lt;span id="updated_at_view" phx-update="ignore"&gt;&lt;/span&gt;
&lt;script&gt;
  const view_element = document.getElementById('updated_at_view');

  document.addEventListener('phx:update', () =&gt; {
    const source_element = document.getElementById('updated_at');
    view_element.innerText = new Date(source_element.getAttribute('datetime')).toLocaleString();
  })
&lt;/script&gt;
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="188062" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/displaying-utc-datetime-in-users-browser-timezone/28361/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-188062" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="188062"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>