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

100%

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

✓ Published0🌍 Public

Last edited Nov 29, 2010

Created on Nov 29, 2010

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.

AI-generated description

Similar vizzes

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

62% 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

56% match

Loading thumbnail…

자바스크립트공부

This example demonstrates basic JavaScript and CSS integration within a simple HTML page. It writes a red-colored message and a user’s age directly into the document using `document.write`, then triggers an `alert` displaying the age variable. The code uses core DOM methods like `document.write` and the global `alert` function, with no external libraries. The page’s embedded script and external `age.js` file highlight foundational scripting patterns in a plain HTML structure, emphasizing how JavaScript can manipulate page content and interact with the user.

Jjungsu

56% 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

56% match

Loading thumbnail…

React First Steps (Date animation?)

This example demonstrates a live-updating digital clock built with React. It displays the current date and time in three formats: a full string, a localized time, and an ISO date with hyphens replaced by bullet characters. The clock updates every second using `setInterval` in the component lifecycle methods. The code uses React state and lifecycle methods like `componentDidMount` and `componentWillUnmount`, along with `setState` to trigger re-renders.

RRussell Watson

56% match

Loading thumbnail…

Clock

This example shows a large, purely typographic digital clock displaying the current time in a monospace font, updating every second. It demonstrates how to build a custom WebComponent using the X-Tag library, with the clock’s text content refreshed via a `setInterval` callback. The rendering uses CSS text-shadow to create a glowing, layered black outline on a white background, giving the time a bold, high-contrast appearance. The component also responds to a `tap` event to toggle the clock between running and stopped states, illustrating lifecycle and event handling within X-Tag’s custom element registration. The data source is the browser’s `Date` object, formatted with `toLocaleTimeString`.

CCurran Kelleher

54% match

Loading thumbnail…

Code golf

This example presents a JavaScript "code golf" function that converts a human age into equivalent cat and dog ages. The visualization itself is the code, intended for a gallery showcasing terse programming. The code uses a nested ternary operator and an arrow function to calculate the conversions, with `alert()` providing the output. It validates the input using `parseFloat` and a comparison check, returning "Invalid" for non-positive or non-numeric values. The data source is the gist file `gistfile1.txt` by MikeyParton.

MMikeyParton

54% match

Loading thumbnail…

Timeline

This example shows a web page titled “Timeline” that displays the text “Hello HTML” in large, centered type, alongside a “Hello JavaScript!” message logged to the browser’s console. The page loads D3 v5 and Moment.js from CDNs, but the code does not yet implement any visualization or timeline functionality. It uses plain CSS for styling and JavaScript for console output, serving as a minimal scaffold for future data-driven timeline work. The React starter project is referenced as a related alternative.

Eetypeemos

54% match