How to format a date using different formats in TypeScript

1 Answer

0 votes
// Strongly typed date object
const now: Date = new Date();

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

// --- BASIC PARTS (typed variables) ---

const year: number = now.getFullYear();
const monthIndex: number = now.getMonth(); // 0–11
const month: string = String(monthIndex + 1).padStart(2, "0");
const day: string = String(now.getDate()).padStart(2, "0");

const hours24: string = String(now.getHours()).padStart(2, "0");
const minutes: string = String(now.getMinutes()).padStart(2, "0");
const seconds: string = String(now.getSeconds()).padStart(2, "0");

console.log("Year:", year);
console.log("Month (01-12):", month);
console.log("Day:", day);
console.log("Time (24h):", `${hours24}:${minutes}:${seconds}`);

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

console.log("YYYY-MM-DD:", `${year}-${month}-${day}`);
console.log("DD/MM/YYYY:", `${day}/${month}/${year}`);
console.log("MM-DD-YYYY:", `${month}-${day}-${year}`);
console.log("YYYY/MM/DD HH:MM:SS:", `${year}/${month}/${day} ${hours24}:${minutes}:${seconds}`);

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

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

// Specific locales
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 (typed options) ---

const fullDate: string = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
}).format(now);

const longDate: string = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
}).format(now);

const mediumDate: string = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
}).format(now);

const shortDate: string = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
}).format(now);

console.log("Full date:", fullDate);
console.log("Long date:", longDate);
console.log("Medium date:", mediumDate);
console.log("Short date:", shortDate);

// Custom format with typed options
const customFormat: string = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit",
  hour12: false
}).format(now);

console.log("Custom formatted:", customFormat);



/*
run:

Original Date object: 2026-05-20T15:37:24.001Z 

Year: 2026
Month (01-12): 05
Day: 20
Time (24h): 15:37:24
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:37:24
Locale date: 5/20/2026
Locale time: 3:37:24 PM
Locale full: 5/20/2026, 3:37:24 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 formatted: Wednesday, May 20 at 15:37:24

*/

 



answered 7 hours ago by avibootz
...