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

PatternExample output
YYYY-MM-DD2025-07-04
DD/MM/YYYY04/07/2025
MM-DD-YY07-04-25
HH:mm:ss14:30:05
DDDD, MMMM DD, YYYYFriday, July 04, 2025
DDD, DD MMM YYYYFri, 04 Jul 2025
YYYY-MM-DDTHH:mm:ss2025-07-04T14:30:05