date-fns Playground

What is date-fns?

date-fns is a modern JavaScript date utility library that provides comprehensive, consistent, and reliable tools for working with dates in JavaScript. Unlike the native JavaScript Date object which has many quirks and inconsistencies, date-fns offers a modular, functional approach to date manipulation. It's tree-shakeable, meaning you only include the functions you actually use, keeping your bundle size minimal. The library supports over 200 functions covering everything from formatting and parsing to comparing, manipulating, and localizing dates.

Why use a date-fns playground?

Working with dates in JavaScript can be tricky—time zones, formatting patterns, and date arithmetic often lead to unexpected results. A playground environment lets you experiment with date-fns functions in real-time, see immediate output, and learn the API without setting up a full project. It's perfect for testing formatting strings, debugging date calculations, or quickly prototyping date logic before integrating it into your application.

Tool description

The date-fns Playground is an interactive coding environment that lets you write and execute JavaScript code with the full date-fns library pre-loaded. The entire date-fns library is available through the dateFns object, giving you access to all 200+ functions. Code runs automatically as you type (with debouncing), and all console.log, console.warn, and console.error outputs appear in the built-in terminal below the editor. This makes it ideal for learning date-fns, testing date operations, and experimenting with different formatting options.

Examples

Format the current date:

const now = new Date();
console.log(dateFns.format(now, "MMMM do, yyyy"));
// Output: December 30th, 2025

Calculate days between two dates:

const start = new Date(2025, 0, 1);
const end = new Date(2025, 11, 31);
console.log(dateFns.differenceInDays(end, start) + " days");
// Output: 364 days

Add time to a date:

const today = new Date();
const nextWeek = dateFns.addWeeks(today, 1);
const nextMonth = dateFns.addMonths(today, 1);
console.log("Next week:", dateFns.format(nextWeek, "yyyy-MM-dd"));
console.log("Next month:", dateFns.format(nextMonth, "yyyy-MM-dd"));

Check if a date is in the past or future:

const date = new Date(2024, 5, 15);
console.log("Is past?", dateFns.isPast(date));
console.log("Is future?", dateFns.isFuture(date));

Parse a date string:

const parsed = dateFns.parse("25/12/2025", "dd/MM/yyyy", new Date());
console.log(dateFns.format(parsed, "EEEE, MMMM do, yyyy"));
// Output: Thursday, December 25th, 2025

Features

• Full date-fns Library: Access all 200+ date-fns functions through the dateFns object
• Live Code Execution: Code runs automatically as you type with smart debouncing
• Built-in Terminal: View console output instantly without browser dev tools
• Syntax Highlighting: JavaScript syntax highlighting for better code readability
• Error Handling: Runtime errors are displayed clearly in the terminal output

Use cases

• Learning date-fns: Experiment with different functions and see results immediately without project setup
• Date Format Testing: Try different format strings to find the exact output pattern you need
• Date Calculation Prototyping: Test complex date arithmetic like adding business days, finding intervals, or comparing dates
• Debugging Date Logic: Isolate and test date-related code snippets from your projects
• Quick Date Conversions: Convert between date formats or calculate time differences on the fly

Common date-fns Functions

Format Tokens Reference