Zgody cookies i prywatność
Opcjonalny pomiar i usługi Google uruchamiamy tylko po Twojej zgodzie. Panel zgód (CMP) zapisuje wybór; odmowa nie blokuje playgroundów.
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.

date-fns Format Playground | Playground Forge

Sprawdź tokeny date-fns, zanim staną się kontraktem produkcyjnym

Testuj tokeny formatowania date-fns, parseISO, custom parse, locale, protected token warnings i formatDistance w prywatnym playgroundzie w przeglądarce.

01

Sprawdź tokeny date-fns, zanim staną się kontraktem produkcyjnym

date-fns Format Playground powstał dla praktycznego momentu review, w którym developer widzi format string w kodzie, dokumentacji albo pull requeście i musi ustalić, czy naprawdę opisuje zamierzony kontrakt daty. Narzędzie przyjmuje timestampy ISO albo customowe stringi, używa date-fns parseISO albo parse z reference date, formatuje wynik z jawnym locale options i pokazuje protected token warnings, zanim RangeError stanie się późnym zaskoczeniem. Route jest privacy-first: wklejone wartości zostają w przeglądarce, historia nie jest zapisywana, a backend nie ocenia dat.

02

Co sprawdza MVP

MVP skupia się na błędach często widocznych w review kodu date-fns. Pokazuje, dlaczego yyyy różni się od YYYY, dlaczego dd różni się od DD, kiedy parseISO jest bezpieczniejsze niż custom parse, po co parse potrzebuje reference date i jak locale musi trafić do options object. Narzędzie liczy też formatDistance od deterministycznego reference date, więc przykłady względnego czasu nie dryfują wraz z aktualnym zegarem. Zakres timezone jest celowo wąski: strona tłumaczy granicę JavaScript Date i ISO, ale nie ładuje date-fns-tz i nie obiecuje pełnej konwersji IANA timezone. Ta granica utrzymuje uczciwy produkt i mały bundle.

03

Jak używać wyniku playgroundu

Zacznij od presetu najbliższego kontraktowi, który oceniasz. ISO input z lokalnym outputem pasuje do dashboardów i paneli admina, gdzie timestamp z API staje się widoczną etykietą. Custom parse jest przydatny dla importowanych dokumentów, formularzy użytkownika i regionalnych stringów typu dd/MM/yyyy HH:mm. ISO roundtrip pomaga ocenić output z offsetem, a polskie lokalizowanie pokazuje, czy obiekt locale jest częścią snippetu. Preset protected-token celowo failuje na YYYY-MM-DD, aby reviewer zobaczył ostrzeżenie date-fns i bezpieczny zamiennik yyyy-MM-dd. Panel wyniku działa jak mały log decyzji. Formatted output pokazuje widoczny string. Parsed ISO pokazuje bazową wartość Date. isMatch potwierdza, czy custom parse pasuje do formatu. Roundtrip output daje stabilny string kontraktowy, a distance output pokazuje formatDistance od deterministycznego reference date. Snippet trzyma importy jawnie: format, parseISO albo parse, formatDistance oraz wybrany import locale. To usuwa typowy problem dokumentacji, w której przykłady pomijają locale object albo sugerują, że date-fns ma ukryty globalny locale state. Protected tokens wymagają osobnego traktowania, bo wyglądają wiarygodnie. W wielu bibliotekach YYYY wydaje się zwykłym tokenem roku, ale date-fns używa semantyki tokenów Unicode. YYYY i YY są tokenami week-year, a D i DD oznaczają day-of-year. date-fns chroni je domyślnie, bo mogą po cichu dać zły wynik kalendarzowy. Playground skanuje formaty przed wykonaniem, pokazuje ostrzeżenie i mapuje RangeError na krótki komunikat użytkownika zamiast stack trace. Zespół nadal może świadomie włączyć advanced options w kodzie aplikacji, ale publiczny MVP nie robi z tych unsafe switchy domyślnego zachowania. Reference date jest równie ważne jak tokeny. parse używa go do uzupełnienia brakujących jednostek i do deterministycznego działania. formatDistance też potrzebuje stabilnego punktu porównania. Playground zależny od aktualnego zegara byłby trudny do testowania i wklejania do dokumentacji. Dlatego strona zaczyna od stałej wartości referenceNow, którą reviewer może zmienić świadomie. Ten sam wzorzec powinien trafić do testów w repozytorium: zamroź reference date, jeśli względny output jest częścią oczekiwanego zachowania. Treść wydawcy jest częścią produktu, nie dekoracją. Użytkownik z wyszukiwarki może zrozumieć zasady tokenów, różnicę parseISO kontra parse, rolę locale options, świadomie ograniczony zakres timezone i sposób użycia skopiowanego snippetu. Route linkuje też do wdrożonego Day.js Date/Time Playground dla zespołów porównujących semantykę bibliotek oraz do sąsiednich narzędzi Playground Forge dla kontraktów payloadów i formatowania kodu. Dzięki temu strona ma wartość przed interakcją i nie jest cienkim textarea z reklamami wokół. Review migracji to drugi praktyczny przypadek uzycia. Zespoly przenoszace przyklady z Moment, Day.js, backendowych formatterow albo eksportow spreadsheet często zabieraja ze soba tokeny, które wygladaja znajomo, ale w date-fns znacza cos innego. Reviewer może wkleic kandydacki string, porownac widoczny output, sprawdzić protected-token warnings i zdecydowac, czy repozytorium potrzebuje notatki migracyjnej. To celowo nie jest pelny migration assistant: narzędzie skupia się na kontrakcie formatowania, locale object, trybie parsowania i reference date, które powinny trafic do testow. Taki waski zakres utrzymuje publiczna strone czytelna, ale nadal odpowiada na ważne pytanie przed skopiowaniem format stringa do produkcyjnego kodu albo dokumentacji. W praktyce wynik warto opisac trzema polami. Pierwsze pole to format output, czyli string widoczny dla użytkownika. Drugie pole to parse contract, czyli czy data przyszła jako ISO, czy jako customowy tekst z okreslonym parse format. Trzecie pole to locale decision, czyli czy wynik ma byc neutralny po angielsku, lokalizowany po polsku albo celowo niezalezny od lokalizacji. Taki zapis pomaga uniknac sytuacji, w ktorej zespol widzi poprawny wynik w jednym komputerze, ale nie potrafi odtworzyc go w testach albo dokumentacji release. Playground porzadkuje te pola przed wejsciem do kodu.

04

Kiedy przejść z playgroundu do repozytorium

Użyj playgroundu, żeby uzgodnić kontrakt daty, zapisać format string, locale, tryb parsowania, reference date i granicę ostrzeżeń, a potem pokryj finalne zachowanie normalnymi testami repozytorium. Jeśli wymaganie dotyczy daylight-saving rules, nazwanych timezone, kalendarzy poza tym zakresem albo date-fns-tz, potraktuj je jako osobną decyzję implementacyjną zamiast rozciągać ten browserowy MVP.