Format Date to Readable String
Converts Date object to customizable string format without external libraries like moment.js
Implementation
Copy the complete example or adapt its typed interface to your project. Comments are kept inside the snippet so the intent travels with the code.
/**
* Format date to readable string
* @param date Date object or timestamp
* @param format Format string (YYYY=year, MM=month, DD=day, HH=hour, mm=minute, ss=second)
* @returns Formatted date string
*/
function formatDate(date: Date | number, format = 'YYYY-MM-DD HH:mm:ss'): string {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
const hours = String(d.getHours()).padStart(2, '0');
const minutes = String(d.getMinutes()).padStart(2, '0');
const seconds = String(d.getSeconds()).padStart(2, '0');
return format
.replace('YYYY', year.toString())
.replace('MM', month)
.replace('DD', day)
.replace('HH', hours)
.replace('mm', minutes)
.replace('ss', seconds);
}
// Usage Example
console.log(formatDate(new Date())); // 2024-05-20 14:30:45
console.log(formatDate(Date.now(), 'YYYY/MM/DD')); // 2024/05/20When to use it
Lightweight alternative to moment.js for basic date formatting in UI displays, logs, or reports
Review the input assumptions and browser or runtime support before adopting a utility unchanged. Small helpers are easiest to maintain when their contract stays narrow.
Reasoning and trade-offs
How it works
The formatter extracts date parts, pads numeric fields, and substitutes tokens in a caller-selected pattern. It offers deterministic output without relying on locale defaults that vary between environments.
What to watch for
Constructing Date from ambiguous strings, local time zones, daylight-saving transitions, and invalid dates can all produce surprising results. Token replacement is not a complete internationalization system and does not localize month names.
Production use
Use a small formatter for controlled machine-like displays with known Date inputs. Use Intl.DateTimeFormat for user-facing localized dates, and make the intended time zone explicit whenever server and browser output must agree.
Before you ship
- Confirm the input contract with tests that cover empty, invalid, boundary, and representative real-world values before sharing the helper across a codebase.
- Keep the function focused on one responsibility and name any project-specific policy explicitly instead of hiding it inside a generic-looking utility.
- Measure behavior in the browsers or runtime versions your product supports, especially when timing, storage, DOM state, locale, or network access is involved.
- Document the return type, mutation behavior, failure mode, and performance characteristics beside the call site so future maintainers can evaluate changes safely.
- Compare the example with current official platform documentation when it relies on a browser API, language feature, or runtime behavior that may change over time.
- If the helper crosses a trust boundary, validate again on the server and avoid treating browser-side checks, TypeScript annotations, or formatted output as a security guarantee.
- Add a small regression test whenever a real edge case is discovered; concrete examples preserve the reason behind a guard more reliably than a general comment.