lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

The <luna-format-date> component formats date and time values using the browser's native Intl.DateTimeFormat API with automatic locale detection.

Paths

/lunadom/components/format-date/format-date.js REQUIRED

Date Styles

Today's date in different styles:

Full:

Long:

Medium:

Short:

Time Styles

Current time in different styles:

Full:

Long:

Medium:

Short:

Date and Time Combined


Custom Part Formatting

Custom day/month/year:

Numeric only:

Short month:

12 vs 24 Hour Clock

12-hour:

24-hour:

Timezone Support

UTC:

New York:

London:

Tokyo:

Works with Date Picker

Selected date formatted multiple ways:

Full:

Long:

Medium:

Short:

Custom:

Customization

Attributes
value - Date value (ISO 8601, timestamp, etc., required)
type - Display parts (date, time, datetime, default: "date")
date-style - Date preset (full, long, medium, short, default: "medium")
time-style - Time preset (full, long, medium, short, default: "short")
day - Day format (numeric, 2-digit)
month - Month format (numeric, 2-digit, long, short, narrow)
year - Year format (numeric, 2-digit)
hour - Hour format (numeric, 2-digit)
minute - Minute format (numeric, 2-digit)
second - Second format (numeric, 2-digit)
hour12 - Use 12-hour clock (boolean)
timezone - IANA timezone name (e.g., "America/New_York", "UTC")

Example Code

<!-- Date styles --> <luna-format-date value="2026-02-23" date-style="full"></luna-format-date> <luna-format-date value="2026-02-23" date-style="medium"></luna-format-date> <luna-format-date value="2026-02-23" date-style="short"></luna-format-date> <!-- Time only --> <luna-format-date value="2026-02-23T14:30:00" type="time"></luna-format-date> <!-- Date and time --> <luna-format-date value="2026-02-23T14:30:00" type="datetime" ></luna-format-date> <!-- Custom parts --> <luna-format-date value="2026-02-23" day="2-digit" month="long" year="numeric" ></luna-format-date> <!-- With timezone --> <luna-format-date value="2026-02-23T14:30:00Z" type="datetime" timezone="America/New_York" ></luna-format-date> <!-- 24-hour clock --> <luna-format-date value="2026-02-23T14:30:00" type="time" hour12="false" ></luna-format-date> <!-- With date picker --> <luna-date-picker id="picker"></luna-date-picker> <luna-format-date id="formatted" date-style="full"></luna-format-date> <script> const picker = document.getElementById('picker'); const formatted = document.getElementById('formatted'); picker.addEventListener('luna-change', (e) => { formatted.setAttribute('value', e.detail.value); }); </script>