water

water

Timex.from_now() How to update liveview every second or more optimized way, to display x seconds ago?

Timex’s from_now gives the relative duration from now. But I’d like to show it in real time.
The x seconds ago would count up every second. The minutes every minute, and so on.

Is there a better way to do this than just update the view every second?

 <div class="text-xs font-normal">{Timex.from_now(time)}</div>
"2 seconds ago"

Most Liked

arcanemachine

arcanemachine

Just use Javascript. There’s no need to do this on the server.

<div id="time-div" data-time={Timex.from_now(time)}>&nbsp;</div>
<script>
  const div = document.querySelector("#time-div");
  const startTime = new Date(div.dataset.time);

  function updateTime() {
    const now = new Date();
    const diff = Math.floor((now - startTime) / 1000);
    div.textContent = new Date(now).toLocaleString();
  }

  setInterval(updateTime, 1000);
  updateTime();
</script>
Wigny

Wigny

My preferred approach to display relative times or localize timestamps accordingly to the user browser preferences is to use the relative-time-element web-component.

You just need to:

<relative-time datetime={time} />
water

water

<div class="text-xs font-normal">
  {time
  |> DateTime.shift_zone!("Europe/London")
  |> Calendar.strftime("%d %B %H:%M",
    month_names: fn month ->
      {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}
      |> elem(month - 1)
    end
  )}&emsp;-&emsp;
  <relative-time
    datetime={time}
    format="elapsed"
    threshold="PT60M"
    formatStyle="narrow"
  /> AGO
</div>

20 Sep 19:35 - 22m 27s AGO

Where Next?

Popular in Questions Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
ovidiubadita
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
New
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list. ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New

Other popular topics Top

vertexbuffer
Hello, can anybody help here..? I have a list of players and I what to delete an element, but every for loop the list is reverting to ori...
New
AstonJ
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
PeterCarter
There are pre-rolled solutions for other frameworks that do work. However, Phoenix does not seem to have these. Have people had good expe...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
JakeBecker
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
1144 54120 245
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement