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
Just use Javascript. There’s no need to do this on the server.
<div id="time-div" data-time={Timex.from_now(time)}> </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>
4
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} />
2
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
)} - 
<relative-time
datetime={time}
format="elapsed"
threshold="PT60M"
formatStyle="narrow"
/> AGO
</div>
20 Sep 19:35 - 22m 27s AGO
1
Popular in Questions
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible.
total = 10
while total != 0
...
New
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
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
Hello everybody,
usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
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
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
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
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
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
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
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
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
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
i’m a new one to elixir
which editor can i use
vs code? or atom?
Thanks! :smiley:
New
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
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
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
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
Lets say I have map like this fetching from my database
%{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New
TL;DR: I’ve just released an implementation of Microsoft’s IDE-independent Language Server Protocol for Elixir. It adds language support ...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









