How to format a date using different formats in JavaScript

1 Answer

0 votes
const now = new Date();

console.log("Original Date object:", now, "\n");

// --- BASIC PARTS ---

console.log("Year (4 digits):", now.getFullYear());         
console.log("Month (0-11):", now.getMonth());                // 0 = January
console.log("Month (01-12):", String(now.getMonth() + 1).padStart(2, "0"));
console.log("Day of month:", String(now.getDate()).padStart(2, "0"));
console.log("Hours (24h):", now.getHours());
console.log("Minutes:", now.getMinutes());
console.log("Seconds:", now.getSeconds());

// --- COMMON FORMATS (manual formatting) ---

const yyyy = now.getFullYear();
const mm = String(now.getMonth() + 1).padStart(2, "0");
const dd = String(now.getDate()).padStart(2, "0");
const hh = String(now.getHours()).padStart(2, "0");
const min = String(now.getMinutes()).padStart(2, "0");
const ss = String(now.getSeconds()).padStart(2, "0");

console.log("YYYY-MM-DD:", `${yyyy}-${mm}-${dd}`);
console.log("DD/MM/YYYY:", `${dd}/${mm}/${yyyy}`);
console.log("MM-DD-YYYY:", `${mm}-${dd}-${yyyy}`);
console.log("YYYY/MM/DD HH:MM:SS:", `${yyyy}/${mm}/${dd} ${hh}:${min}:${ss}`);

// --- USING toLocaleDateString() ---

console.log("Locale date (default):", now.toLocaleDateString());
console.log("Locale time (default):", now.toLocaleTimeString());
console.log("Locale full:", now.toLocaleString());

// Custom locale formats
console.log("US format:", now.toLocaleDateString("en-US"));      // MM/DD/YYYY
console.log("UK format:", now.toLocaleDateString("en-GB"));      // DD/MM/YYYY
console.log("German format:", now.toLocaleDateString("de-DE"));  // DD.MM.YYYY

// --- USING Intl.DateTimeFormat ---

console.log(
  "Full date:",
  new Intl.DateTimeFormat("en-US", { dateStyle: "full" }).format(now)
);

console.log(
  "Long date:",
  new Intl.DateTimeFormat("en-US", { dateStyle: "long" }).format(now)
);

console.log(
  "Medium date:",
  new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(now)
);

console.log(
  "Short date:",
  new Intl.DateTimeFormat("en-US", { dateStyle: "short" }).format(now)
);

console.log(
  "Custom (weekday, month, day):",
  new Intl.DateTimeFormat("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric"
  }).format(now)
);

console.log(
  "Custom (24h time):",
  new Intl.DateTimeFormat("en-US", {
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    hour12: false
  }).format(now)
);



/*
run:

Original Date object: 2026-05-20T15:31:01.991Z 

Year (4 digits): 2026
Month (0-11): 4
Month (01-12): 05
Day of month: 20
Hours (24h): 15
Minutes: 31
Seconds: 1
YYYY-MM-DD: 2026-05-20
DD/MM/YYYY: 20/05/2026
MM-DD-YYYY: 05-20-2026
YYYY/MM/DD HH:MM:SS: 2026/05/20 15:31:01
Locale date (default): 5/20/2026
Locale time (default): 3:31:01 PM
Locale full: 5/20/2026, 3:31:01 PM
US format: 5/20/2026
UK format: 20/05/2026
German format: 20.5.2026
Full date: Wednesday, May 20, 2026
Long date: May 20, 2026
Medium date: May 20, 2026
Short date: 5/20/26
Custom (weekday, month, day): Wednesday, May 20
Custom (24h time): 15:31:01

*/

 



answered 7 hours ago by avibootz
...