|:.:.:.:.:.:.:.:.:/.:.:.:.:.:./.:.:.:.:.:.:.:.:.:.:.:.:.:./|   '. :.:.:.:.:.:.:.:.:.:.l.ヽ:.:.:.:.l:.:.:.:.:.:.:.:.:.:∧\:.:.:.',
          |:.:.:.:.:.:.:./.:.:.:.:.:./.:.:.:.:.:.:.:.:.:.:.:.: , ′   l :.:.:.:.:.:.:.:.:.:| ∨.:.:.l:.:.:.:.:.:.:.:.:.:.∧ \:.'.
          |:.:.:.:.:.:/.:.:.:.:.: /.:.:.:.:.:.:.:.:. ヽ/ /    |:.:.:.:.:.:.:./:.:.|   y'.:.:|:.:.:.:.|:.:.:.:.:.:.∧   ヘ.
          |:.:.:.:./.:.:.:.//.:.:.:.:.:.:.:.:.:.:/ \,′   !:.:.:.:.:.:/|:.:./,/ '.:.:| :.:.:.|:.:.:.:.:.:.:.:.|
          |:.:.:/.:.:./.:./.:.:.:.:.:.:.:.:./   /` ‐-‐'|:.:.:./ |ァ'´    |:.:| :.:.:.|:.:.:.:.:.:.:.:.|
          |:.:.i.:.:./.:.:.: '.:.:.:.:.:.:.:/   ,/       |:.:.:/   ′    }.:.| :.:.:.|:.:.:.| :.:.:.:|
          |:.:.|:./.: rヘ|:.:.:.:.:.:/:.| 三三三三三  |:./   三三三 ハ|:.:.:.:.|:.:.:.| :.:.:.:|
          |:.:.l〃.:{  |:.:.:.:./.:.:.|             l.'         .i.:.:.i.:.:.:∧ :.:|ヽ :.:|
          |:.:./.:.:.:.\|:.:.:/.:.:.:.:|                '       |:.:.||:.:/  :.:.| '.:.:l
          |:./.:.:.:.:.:.:. !:./.:.:.:.:.:.'、            ,.ー--、    }.:.:|レ′ ∨  V
          |/.:.:.:.:.:.:.:.:V '´  ̄`ヽ.、            ´`¨¨{. |_.  '.:.:.:.|
         /.:.:.:.:.:.:.:./         ヘ `    . __. -r1 |:.:.:.:.:.:.:.:.|
         :.:.:.:.:.:.:, '         '. \    | _.   -┴ー──┴┐
         :.:.:.:.:./           |  \  r' |   -──────i'
    

< KONAKONA.MOE >

Javascript Function to get Relative Time with Auto Units

Last Mod.: 2024-06-08 | Created On: 2024-06-07


I was making a dynamic “projects” section for my site using the Gitea API and I wanted relative times based on the last time I commited to the repo, I almost used a library, importing another shit ton of javascript into this site, but I found out that javascript has a native API for this. The only problem is that it doesn’t choose units automatically so I stole this functiong below. The only different from the source that I stole is that his’ was written in typescript so I just compiled it to vanilla javascript.

getRelativeTimeString()

 1function getRelativeTimeString(date, lang = navigator.language) {
 2
 3    // Allow dates or times to be passed
 4    const timeMs = typeof date === "number" ? date : date.getTime()
 5
 6    // Get the amount of seconds between the given date and now
 7    const deltaSeconds = Math.round((timeMs - Date.now()) / 1000)
 8
 9    // Array reprsenting one minute, hour, day, week, month, etc in seconds
10    const cutoffs = [
11        60,
12        3600,
13        86400,
14        86400 * 7,
15        86400 * 30,
16        86400 * 365,
17        Infinity
18    ]
19
20    // Array equivalent to the above but in the string representation of the units
21    const units = ["second", "minute", "hour", "day", "week", "month", "year"]
22
23    // Grab the ideal cutoff unit
24    const unitIndex = cutoffs.findIndex(cutoff => cutoff > Math.abs(deltaSeconds))
25
26    // Get the divisor to divide from the seconds. E.g. if our unit is "day" our divisor
27    // is one day in seconds, so we can divide our seconds by this to get the # of days
28    const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1
29
30    // Intl.RelativeTimeFormat do its magic
31    const rtf = new Intl.RelativeTimeFormat(lang, { numeric: "auto" })
32    return rtf.format(Math.floor(deltaSeconds / divisor), units[unitIndex])
33}

Example

1console.log(`Last time commited: ${getRelativeTimeString(new Date(item.updated_at), 'en-GB')}`)

Source

https://www.builder.io/blog/relative-time


Prev:
Making an SMB Share from Linux to Windows
Next:
Hugo Favicon Shortcode