Custom Date Examples
Practical recipes for building custom date formatters — display dates exactly the way your UI needs them, without a library.
Build a reusable formatter function
A single helper that converts any Date into any string pattern using tokens.
const formatDate = (date, pattern) => {
const d = new Date(date);
const pad = (n) => String(n).padStart(2, "0");
const tokens = {
YYYY: d.getFullYear(),
YY: String(d.getFullYear()).slice(-2),
MM: pad(d.getMonth() + 1),
M: d.getMonth() + 1,
DD: pad(d.getDate()),
D: d.getDate(),
HH: pad(d.getHours()),
H: d.getHours(),
mm: pad(d.getMinutes()),
ss: pad(d.getSeconds()),
};
return pattern.replace(/YYYY|YY|MM|M|DD|D|HH|H|mm|ss/g, (match) => tokens[match]);
};
formatDate(new Date(), "YYYY-MM-DD"); // "2025-07-04"
formatDate(new Date(), "DD/MM/YYYY"); // "04/07/2025"
formatDate(new Date(), "MM-DD-YY"); // "07-04-25"
formatDate(new Date(), "DD MMM, YYYY"); // won't work — see named months below
formatDate(new Date(), "HH:mm:ss"); // "14:30:05"
formatDate(new Date(), "YYYY-MM-DD HH:mm:ss"); // "2025-07-04 14:30:05"
Named months and weekdays
Extend the formatter to support full and abbreviated month/day names.
const MONTHS_FULL = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const MONTHS_SHORT = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
const DAYS_FULL = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const DAYS_SHORT = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
const formatDateFull = (date, pattern) => {
const d = new Date(date);
const pad = (n) => String(n).padStart(2, "0");
const tokens = {
YYYY: d.getFullYear(),
MM: pad(d.getMonth() + 1),
DD: pad(d.getDate()),
HH: pad(d.getHours()),
mm: pad(d.getMinutes()),
ss: pad(d.getSeconds()),
MMMM: MONTHS_FULL[d.getMonth()],
MMM: MONTHS_SHORT[d.getMonth()],
DDDD: DAYS_FULL[d.getDay()],
DDD: DAYS_SHORT[d.getDay()],
};
return pattern.replace(/YYYY|MMMM|MMM|DDDD|DDD|MM|DD|HH|mm|ss/g, (t) => tokens[t]);
};
formatDateFull(new Date(), "DDDD, MMMM DD, YYYY"); // "Friday, July 04, 2025"
formatDateFull(new Date(), "DDD, DD MMM YYYY"); // "Fri, 04 Jul 2025"
formatDateFull(new Date(), "MMMM D, YYYY"); // uses MM token — adjust as needed
Common display formats — copy-paste ready
const date = new Date("2025-07-04T14:30:05");
// ISO 8601 (storage / APIs)
date.toISOString();
// "2025-07-04T14:30:05.000Z"
// US format
date.toLocaleDateString("en-US");
// "7/4/2025"
// UK / European format
date.toLocaleDateString("en-GB");
// "04/07/2025"
// Long form
date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" });
// "July 4, 2025"
// With weekday
date.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" });
// "Friday, July 4, 2025"
// Short weekday + date
date.toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
// "Fri, Jul 4"
// Time only (12-hour)
date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
// "02:30 PM"
// Time only (24-hour)
date.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
// "14:30"
// Date + time together
date.toLocaleString("en-US", {
year: "numeric", month: "short", day: "numeric",
hour: "2-digit", minute: "2-digit",
});
// "Jul 4, 2025, 02:30 PM"
Formatting for different regions
const date = new Date("2025-07-04");
const locales = [
["en-US", "US"],
["en-GB", "UK"],
["fr-FR", "France"],
["de-DE", "Germany"],
["ja-JP", "Japan"],
["ar-SA", "Arabic"],
["zh-CN", "China"],
["hi-IN", "India"],
];
const opts = { year: "numeric", month: "long", day: "numeric" };
locales.forEach(([locale, label]) => {
console.log(`${label}: ${date.toLocaleDateString(locale, opts)}`);
});
// US: July 4, 2025
// UK: 4 July 2025
// France: 4 juillet 2025
// Germany: 4. Juli 2025
// Japan: 2025年7月4日
// Arabic: ٤ يوليو ٢٠٢٥
// China: 2025年7月4日
// India: 4 जुलाई 2025
Parse non-standard date strings
When new Date("string") doesn't work (e.g. "04-07-2025" in DD-MM-YYYY).
// Parse DD-MM-YYYY → Date
const parseDMY = (str) => {
const [day, month, year] = str.split("-").map(Number);
return new Date(year, month - 1, day);
};
parseDMY("04-07-2025"); // Fri Jul 04 2025
// Parse MM/DD/YYYY → Date
const parseMDY = (str) => {
const [month, day, year] = str.split("/").map(Number);
return new Date(year, month - 1, day);
};
parseMDY("07/04/2025"); // Fri Jul 04 2025
Add / subtract from a date
const addDays = (date, n) => new Date(new Date(date).setDate(new Date(date).getDate() + n));
const addMonths = (date, n) => new Date(new Date(date).setMonth(new Date(date).getMonth() + n));
const addYears = (date, n) => new Date(new Date(date).setFullYear(new Date(date).getFullYear() + n));
const addHours = (date, n) => new Date(new Date(date).getTime() + n * 3600000);
const addMinutes = (date, n) => new Date(new Date(date).getTime() + n * 60000);
const today = new Date("2025-07-04");
addDays(today, 7).toDateString(); // "Fri Jul 11 2025"
addDays(today, -7).toDateString(); // "Fri Jun 27 2025"
addMonths(today, 3).toDateString(); // "Fri Oct 03 2025" (approx)
addYears(today, 1).toDateString(); // "Sat Jul 04 2026"
Start and end of a time period
const startOfDay = (date) => new Date(new Date(date).setHours(0, 0, 0, 0));
const endOfDay = (date) => new Date(new Date(date).setHours(23, 59, 59, 999));
const startOfMonth = (date) => {
const d = new Date(date);
return new Date(d.getFullYear(), d.getMonth(), 1);
};
const endOfMonth = (date) => {
const d = new Date(date);
return new Date(d.getFullYear(), d.getMonth() + 1, 0, 23, 59, 59, 999);
};
const startOfYear = (date) => new Date(new Date(date).getFullYear(), 0, 1);
const endOfYear = (date) => new Date(new Date(date).getFullYear(), 11, 31, 23, 59, 59, 999);
const d = new Date("2025-07-04");
startOfMonth(d).toDateString(); // "Tue Jul 01 2025"
endOfMonth(d).toDateString(); // "Thu Jul 31 2025"
Summary of custom patterns
| Pattern | Example output |
|---|---|
YYYY-MM-DD | 2025-07-04 |
DD/MM/YYYY | 04/07/2025 |
MM-DD-YY | 07-04-25 |
HH:mm:ss | 14:30:05 |
DDDD, MMMM DD, YYYY | Friday, July 04, 2025 |
DDD, DD MMM YYYY | Fri, 04 Jul 2025 |
YYYY-MM-DDTHH:mm:ss | 2025-07-04T14:30:05 |