Dynamický update času „před X minutami“

V případě, že se na stránce zobrazuje místo běžného data text typu „zasláno před 1 hodinou“, je dobré tento údaj JavaScriptem průběžně aktualisovat.

Pro získání slovní representace kalendářního data v PHP se perfektně hodí funkce timeAgoInWords, která obsahuje i správné české skloňování.

Pro docílení průběžné aktualisace času stačí tedy:

1. Převést PHP funkci do JS.
2. Vytvořit funkci, co projde všechny příslušné elementy a upraví jejich obsah.
3. Tato funkce se bude spouštět opakovaně (například každou minutu).

Živá ukázka hotového řešení

Element <time>

Pro uvedení data/času se nabízí použít HTML značku <time>. Slovní representace času bude jako její obsah (v JS innerHTML). Skutečný a strojově čitelný datum potom bude v atributu datetime.

<time datetime="2014-07-04T10:37:00">
  Před X hodinami
</time>

Původní obsah může buď vypsat PHP, nebo se první JavaScriptový update času spustí ihned po načtení stránky.

Písmeno T mezi datem a časem je kvůli Firefoxu a IE, které si s běžným 2014-07-04 10:37:00 neporadí.

Nepřesnosti

Komplikace přináší fakt, že datum na straně klienta (v JavaScriptu) nemusí a nejspíš také nebude shodné s časem na serveru.

Časová pásma

Je tedy poměrně vhodné u data a času uvést na straně serveru časové pásmo:

<time datetime="2014-07-04T10:37:00+02:00">
  Před X hodinami/měsíci/roky
</time>

Přesnější doba prodlevy

Je potřeba si zvážit do jaké míry má být údaj přesný.

V případě počítání rozdílu mezi časem ze serveru a od návštěvníka to nejspíš žádná sláva nebude (přesný/stejný čas by musel mít nastaven návštěvník i server).

Nabízejí se následující řešení:

1. Čas pro zjišťování rozdílu si zjišťovat AJAXem ze serveru. Zvlášť v případě, že je na stránce nějaké automatické kontrolování nového obsahu, není problém do odpovědi serveru přibalit hodnotu aktuálního data.

2. Při načtení stránky si do jedné JS proměnné vypsat čas na serveru a do druhé aktuální čas klienta. Z toho potom počítat nepřesnost mezi časy a výsledný rozdíl tak upravit.

3. Na serveru si do <time> vypsat přímo počet sekund. V JavaScriptu si uložit do proměnné čas klienta a při spuštění aktualisace ho odečíst od aktuálního klientského času. Tento rozdíl se potom přičte k rozdílu ze serveru a výsledek je připraven.