Back to all snippets
Library/Utilities/Date Formatting
javascriptbeginnerdateformattingtime

How to implement Date Formatting in Javascript

Format dates in various common formats

Quick Answer

Extract year, month (zero-padded), and day from a `Date` object and concatenate them in the desired order — no library needed for the three most common formats.

Code Snippet

1const formatDate = (date, format = 'YYYY-MM-DD') => {
2  const d = new Date(date);
3  const year = d.getFullYear();
4  const month = String(d.getMonth() + 1).padStart(2, '0');
5  const day = String(d.getDate()).padStart(2, '0');
6
7  const formats = {
8    'YYYY-MM-DD': `${year}-${month}-${day}`,
9    'DD/MM/YYYY': `${day}/${month}/${year}`,
10    'MM/DD/YYYY': `${month}/${day}/${year}`,
11  };
12
13  return formats[format] || formats['YYYY-MM-DD'];
14};

What is Date Formatting?

The native Date object provides all the parts needed to format dates without a library. This function extracts year, month, and day with zero-padding and maps them to common format strings. For more complex formatting requirements in larger projects, consider the Intl.DateTimeFormat API for locale-aware output.

How It Works

  1. 1Pass any date string, timestamp, or Date object — `new Date(date)` normalises them all.
  2. 2`getMonth() + 1` corrects for JavaScript's 0-indexed months.
  3. 3`.padStart(2, '0')` zero-pads single-digit months and days for consistent column alignment.
  4. 4A format lookup object maps format strings to their assembled output.

Common Use Cases

  • Data tables - Display dates in a consistent, readable format
  • Form inputs - Format date values for display in date fields
  • Report generation - Format dates in region-specific formats
  • API responses - Normalise date strings before displaying to users

Key Benefits

  • No external date library dependency
  • Supports the three most common date format conventions
  • Zero-padded day and month for consistent column alignment
  • Easy to extend with time components

Common Mistakes to Avoid

  • Using `getMonth()` without `+ 1` — January returns 0, not 1.
  • Passing a date string like '2024-01-15' directly to display — timezone offsets can shift the displayed date by one day. Parse with `new Date(date + 'T00:00:00')` to anchor to local midnight.
  • Not considering locale — for user-facing dates prefer `Intl.DateTimeFormat` which respects the user's regional settings.

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more javascript examples

Frequently Asked Questions

Should I use date-fns or dayjs instead?

For simple formatting, the native Date object is sufficient. For complex operations like date arithmetic, time zones, or relative formatting (e.g. '3 days ago'), use `date-fns` (tree-shakeable) or `dayjs` (tiny bundle).

Related Snippets

javascript
beginner
Generate Unique ID
Generate unique identifiers for items
utilitiesidrandom
javascript
beginner
Email Validation
Validate email addresses with regex
validationemailregex
javascript
intermediate
Query String Parser
Parse and stringify URL query strings
urlparsingutilities

About This Javascript Code Snippet

This free javascript code snippet for date formatting is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement date formatting quickly and correctly.

All snippets in the Snippetly library follow javascript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses javascript.

Tags: date, formatting, time  | Language: javascript  | Difficulty: beginner  | Category: Utilities

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets