Skip to main content
100%

JavaScript/TypeScript: print relative times with no dependencies. e.g. "3 minutes ago", "1 week ago"

✓ Published0🌍 Public
TTommasoAmici
Last edited Jun 12, 2022
Created on May 19, 2022

This example demonstrates how to format relative time strings like “3 minutes ago” or “1 week ago” using the native JavaScript `Intl.RelativeTimeFormat` API. It defines a `formatDate` function that calculates the time difference between a given `Date` and the current moment, then selects the appropriate unit—seconds, minutes, hours, days, weeks, months, or years—based on the elapsed duration. The code uses no external dependencies, relying solely on TypeScript and the built-in `Intl.RelativeTimeFormat` with `numeric: "auto"` for human-friendly output.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 489e9ac301a5022e6e8c60236df7e875

This example demonstrates how JavaScript’s built-in `Date` object can format and extract the current time in various human-readable styles, including date-only, time-only, and localized strings. It also shows a custom function that converts a 24-hour hour value to a 12-hour format with `am`/`pm` suffixes, producing a concise string like “12-17 at 2pm” alongside the full locale-specific time. The code uses native `Date` methods such as `toDateString`, `toTimeString`, `toLocaleDateString`, `toLocaleTimeString`, and getters like `getMonth`, `getDate`, and `getHours`. It relies on the browser’s or Node.js’s JavaScript runtime without external libraries.

Aamazingandyyy
63% match
Loading thumbnail…

Simple Custom Time Formats with D3 V4

This example demonstrates how D3’s time scale and axis can be customized to display different date-time formats depending on the temporal granularity, such as milliseconds, seconds, minutes, hours, days, weeks, months, or years. It uses D3 v4’s `d3.axisBottom` with a custom `multiFormat` function that conditionally applies format specifiers from `d3.timeFormat` based on the interval between ticks. The data domain spans a single day from January 1, 2000, rendered as an SVG with margins and a 960x500 canvas. The code leverages `d3.timeSecond`, `d3.timeMinute`, `d3.timeHour`, `d3.timeDay`, `d3.timeWeek`, `d3.timeMonth`, and `d3.timeYear` for comparisons, providing a clear hierarchy of time labels.

FFasani
59% match
Loading thumbnail…

JavaScript Date Format

This example demonstrates the JavaScript `dateFormat` library, which formats dates and times using customizable mask patterns. It shows how to apply masks like `shortDate`, `longDate`, and `isoDateTime` to produce strings such as `m/d/yy` or `yyyy-mm-dd'T'HH:MM:ss`. The code defines a closure-based formatter with regex token parsing and supports UTC conversion, internationalized day and month names, and common presets. It also extends `Date.prototype` with a `.format()` method for direct usage. The data source is the current date or any user-supplied date, processed through `Date.parse`.

Aabonello
57% match
Loading thumbnail…

All the parts we use to convert dates on the page to local times

This example shows a set of JavaScript functions that convert date and time displays on a webpage into a user’s local timezone, and also classifies the age of each timestamp relative to the current moment. The code uses the jQuery library to select and modify DOM elements, calling methods like `$.parseUTCDate` and `$.edate.timeAgoInWords` to handle date parsing and formatting. It assigns CSS classes such as `age-new` or `age-fresh` based on the computed time difference, and updates the text content of each timestamp span accordingly. The data source is the timestamp text within the page’s HTML elements, processed entirely client-side.

CCaged
56% match
Loading thumbnail…

function_minutes_into_Time

This example demonstrates a collection of utility functions for formatting time and percentages, and assigning colors to activities. The code defines a `minutesToTime` function that converts a minute value into a 12-hour clock string with AM/PM, a `readablePercent` function that rounds a number to a percentage with a “<1%” floor, and a `color` function that maps numerical activity codes to specific hexadecimal colors. The visualization uses the D3.js library version 3.5.5, loaded via a CDN, and outputs results to the console rather than drawing any graphical elements.

BBenHeubl
55% match
Loading thumbnail…

DateTime difference between 2 timestamps. Granularity from centuries to nanos.

This example shows the elapsed time between September 11, 2001, and the current moment, broken down into units from centuries down to nanoseconds. Two approaches are compared: the first uses Java’s `ChronoUnit` enumeration with a tail-recursive function to compute differences across twelve granularities, while the second uses `TimeUnit` conversion and `ZoneOffset` to produce a day-to-second breakdown. The Scala code builds a human-readable string, adjusting unit labels for singular values, and prints both outputs from the `Stopwatch` object.

PP7h
54% match
Loading thumbnail…

d3.time.format localization

A clock displays the current time in Russian, updating every second. The example demonstrates locale-specific formatting in d3.time.format, using the `%c` directive to render a localized date and time string. The page uses d3.v2.min.js with the `d3.select` API to update an HTML `h1` element. The D3 library is built with the `ru_RU` locale, which changes the output of `d3.time.format`. An animation, driven by `setInterval`, refreshes the displayed time at a one-second interval.

Mmbostock
54% match
Loading thumbnail…

fresh block

This example demonstrates how to parse a date string containing a timezone offset and extract its local time components using D3’s time parsing utilities. It converts an ISO-like timestamp with a UTC offset into a JavaScript Date object via `d3.timeParse`, then reassembles the hours and minutes into a new string with a different format. The code uses `d3.timeParse` twice, first with a format that includes the offset and second without it, but does not render any visualization.

MMathReynaud
53% match