Privacy
Do you allow measurement and integrations that are enabled for this host profile?
Date/time

date-fns Format Playground

Check date-fns format tokens, parseISO, custom parsing, locale options and protected token warnings before a date contract lands in code.

  • Input stays in the browser
  • Protected token diagnostics
  • Explicit locale options

date-fns formatting without token surprises

date-fns is direct and modular, but production mistakes often come from details that look tiny in review: YYYY instead of yyyy, DD instead of dd, a parse format that does not match input, a locale that is missing from the options object or a reference date that changes the parse result. This playground keeps those choices visible.

The evaluator runs in the browser. The page does not send pasted dates, formats or snippets to a backend and does not store history.

Format and parse with date-fns

Choose a preset, adjust the input, parse mode, format strings, locale and reference date, then inspect output, warnings and a copyable snippet.

ISO parse

Start from an ISO timestamp and inspect a common yyyy-MM-dd HH:mm:ss output.

Input contract

date-fns output

Formatted
2026-05-26 09:30:00
Parsed ISO
2026-05-26T09:30:00.000Z
Mode / locale
ISO parse / English

Parsed ISO

2026-05-26T09:30:00.000Z

The parsed Date serialized as ISO. Local rendering may still differ by runtime timezone.

isMatch check

ISO input

Custom parse mode validates the string against the selected parse format.

Roundtrip format

2026-05-26T09:30:00Z

A stable date-fns format useful for contract review.

Distance

in about 10 hours

formatDistance from the deterministic reference date.

Review notes

  • ISO mode uses parseISO(...). The formatted output is still rendered through the runtime local JS Date boundary.
  • Full IANA timezone conversion is outside this MVP; date-fns-tz is not loaded.

Reproducible snippet

import { format, formatDistance, parseISO } from 'date-fns';
import { enUS } from 'date-fns/locale/en-US';

const locale = enUS;
const value = parseISO("2026-05-26T09:30:00Z");
const formatted = format(value, "yyyy-MM-dd HH:mm:ss", { locale });
const distance = formatDistance(value, parseISO("2026-05-26T00:00:00.000Z"), { addSuffix: true, locale });

What to verify before shipping date-fns code

Protected tokens

date-fns follows Unicode token rules. YYYY and DD are protected because they can mean week-year or day-of-year. For normal calendar output, use yyyy and dd.

parseISO vs parse

Use parseISO for ISO strings. Use parse with a format and reference date when the input is custom, user-facing or imported from a document.

Local JS Date boundary

This MVP does not load date-fns-tz or promise IANA timezone conversion. It shows the browser/runtime Date boundary clearly so reviewers do not confuse local output with a scheduling engine.

Date format decisions usually sit next to payload validation, code formatting and another date library. Use the neighboring tools when the contract is broader than one date-fns expression.

Open Day.js Date/Time PlaygroundOpen Prettier Config PlaygroundOpen JSON Schema Validator

FAQ

Does this include full timezone conversion?

No. The MVP intentionally shows the JS Date / ISO boundary and does not load date-fns-tz. Full IANA timezone handling should be a separate tool.

Why does date-fns reject YYYY?

YYYY is a protected week-year token in date-fns. Use yyyy for calendar years unless application code deliberately enables the additional week-year token option.

Why is reference date editable?

parse and formatDistance need a stable reference for reproducible examples. A deterministic value keeps docs, tests and review notes from drifting with the current clock.

Does the page send dates to a server?

No. The evaluator runs client-side, does not store history and treats pasted strings as private browser data.