Skip to content
SmartHand Design Systemv0.1.1

Formats

JavaScriptformat.jsRequires _defaults.js

Write the raw value in your HTML and let format.js render it — numbers via numeral, dates via date-fns. The format strings live in window._formats (from _defaults.js), so formatting is consistent everywhere.

Number & date formatting
Open ↗
components/formats.html
<dl class="grid max-w-md grid-cols-2 gap-x-6 gap-y-3 text-foreground">
  <dt class="text-foreground-subtle">Number</dt>
  <dd class="font-medium"><span data-format="number">1234567.89</span></dd>


  <dt class="text-foreground-subtle">Integer, grouped</dt>
  <dd class="font-medium"><span data-format="number" data-format-as="intK">1234567</span></dd>


  <dt class="text-foreground-subtle">Float, grouped</dt>
  <dd class="font-medium"><span data-format="number" data-format-as="floatK">1234.5</span></dd>


  <dt class="text-foreground-subtle">Date</dt>
  <dd class="font-medium"><span data-format="date">2025-01-12T09:14:23Z</span></dd>


  <dt class="text-foreground-subtle">Date, long text</dt>
  <dd class="font-medium"><span data-format="date" data-format-as="dateTextLong">2025-01-12T09:14:23Z</span></dd>


  <dt class="text-foreground-subtle">Time</dt>
  <dd class="font-medium"><span data-format="date" data-format-as="time">2025-01-12T09:14:23Z</span></dd>
</dl>

Markup

Section titled “Markup”
<!-- prints 1,234,567.89 -->
<span data-format="number">1234567.89</span>


<!-- prints 12 Jan 2025 -->
<span data-format="date" data-format-as="dateText">2025-01-12T09:14:23Z</span>

Attributes

Section titled “Attributes”
Attribute Value Meaning
data-format number | date | date-relative What kind of value the element holds.
data-format-as a key of window._formats[type] Which named format to use (see below).
data-format-created — [auto-set] [internal] — marks the element as processed.

The element’s text content is the input; format.js replaces it with the formatted result on load.

Named formats

Section titled “Named formats”

Formats come from window._formats — never hard-code a format string, reference these keys so the whole app stays consistent:

  • number — number, int, intK, float, floatK, floatKLong, byte.
  • date — datetime, datetimeText, date, dateText, dateTextLong, time, yearMonthText, monthDayText, dayTextLong, and more.

Defaults when data-format-as is omitted: numbers use intK/floatK (depending on whether the value is whole), dates use datetimeText.