Prywatność
Czy zezwalasz na pomiar i integracje zgodne z profilem hosta tej aplikacji?
Date/time

date-fns Format Playground

Sprawdź tokeny formatowania date-fns, parseISO, custom parse, locale i protected token warnings, zanim kontrakt daty trafi do kodu.

  • Input zostaje w przeglądarce
  • Diagnostyka protected tokens
  • Jawne locale options

Formatowanie date-fns bez niespodzianek w tokenach

date-fns jest modularne i bezpośrednie, ale błędy produkcyjne często biorą się z detali widocznych dopiero w review: YYYY zamiast yyyy, DD zamiast dd, format parse niepasujący do inputu, brak locale w options albo reference date, które zmienia wynik parsowania. Ten playground pokazuje te decyzje wprost.

Evaluator działa w przeglądarce. Strona nie wysyła wklejonych dat, formatów ani snippetów do backendu i nie zapisuje historii.

Formatuj i parsuj przez date-fns

Wybierz preset, zmień input, tryb parsowania, formaty, locale i reference date, a potem sprawdź wynik, ostrzeżenia i snippet do skopiowania.

ISO parse

Start od timestampu ISO i typowego outputu yyyy-MM-dd HH:mm:ss.

Kontrakt wejścia

Wynik date-fns

Sformatowano
2026-05-26 09:30:00
Parsed ISO
2026-05-26T09:30:00.000Z
Tryb / locale
ISO parse / Angielski

Parsed ISO

2026-05-26T09:30:00.000Z

Sparsowana Date jako ISO. Rendering lokalny nadal może zależeć od timezone runtime.

isMatch check

ISO input

Custom parse waliduje string wobec wybranego formatu.

Roundtrip format

2026-05-26T09:30:00Z

Stabilny format date-fns do review kontraktu.

Distance

in about 10 hours

formatDistance od deterministycznego reference date.

Notatki review

  • 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.

Powtarzalny 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 });

Co sprawdzić przed wdrożeniem kodu date-fns

Protected tokens

date-fns używa reguł tokenów Unicode. YYYY i DD są chronione, bo mogą znaczyć week-year albo day-of-year. Dla zwykłego kalendarza używaj yyyy i dd.

parseISO vs parse

Używaj parseISO dla stringów ISO. Używaj parse z formatem i reference date, gdy input jest customowy, użytkownikowy albo importowany z dokumentu.

Granica local JS Date

Ten MVP nie ładuje date-fns-tz i nie obiecuje konwersji IANA timezone. Pokazuje granicę Date w runtime, żeby review nie myliło lokalnego outputu z silnikiem harmonogramów.

Decyzje o formacie dat zwykle łączą się z walidacją payloadu, formatowaniem kodu i inną biblioteką dat. Użyj sąsiednich narzędzi, gdy kontrakt jest szerszy niż jedno wyrażenie date-fns.

Otwórz Day.js Date/Time PlaygroundOtwórz Prettier Config PlaygroundOtwórz JSON Schema Validator

FAQ

Czy to obejmuje pełną konwersję timezone?

Nie. MVP celowo pokazuje granicę JS Date / ISO i nie ładuje date-fns-tz. Pełna obsługa IANA timezone powinna być osobnym narzędziem.

Dlaczego date-fns odrzuca YYYY?

YYYY jest chronionym tokenem week-year w date-fns. Użyj yyyy dla roku kalendarzowego, chyba że kod aplikacji świadomie włącza dodatkowe opcje week-year.

Po co edytowalny reference date?

parse i formatDistance potrzebują stabilnej referencji dla powtarzalnych przykładów. Deterministyczna wartość chroni dokumentację, testy i notatki review przed dryfem zegara.

Czy strona wysyła daty na serwer?

Nie. Evaluator działa client-side, nie zapisuje historii i traktuje wklejone stringi jako prywatne dane przeglądarki.