How to Format JavaScript Date to '10-Aug-2010' String

Format a JavaScript Date as “10-Aug-2010” by mapping the month index to a three-letter English abbreviation and joining day, month and year with hyphens. You can hand-roll a js date to string format using getDate(), getMonth(), and getFullYear(), or use Intl.DateTimeFormat/formatToParts for a locale-aware javascript date format; if you need parsing (js string to date) there are simple split-and-map examples below.

Contents

• javascript date format: quick examples
• js date to string format: reusable functions
• date string javascript: Intl.formatToParts (locale-aware)
• js string to date (parsing “10-Aug-2010”)
• Using libraries: date-fns and moment (optional)
• Localization and edge cases
• Sources
• Conclusion

javascript date format: quick examples

Two straightforward ways to get “10-Aug-2010”: a manual mapping (zero dependencies) and a locale-aware Intl approach.

Manual mapping (fast, predictable)

const monthAbbr = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

function formatDDMMMYYYY(date) {
 const day = date.getDate(); // 1..31
 const month = monthAbbr[date.getMonth()]; // 0..11 -> 'Aug'
 const year = date.getFullYear();
 return `${day}-${month}-${year}`; // "10-Aug-2010"
}

const d = new Date(2010, 7, 10); // months are zero-based: 7 -> August
console.log(formatDDMMMYYYY(d)); // "10-Aug-2010"

This is the simplest approach and is what W3Schools illustrates for custom formats using getDate()/getMonth()/getFullYear() — clear and tiny dependency footprint: https://www.w3schools.com/js/js_date_formats.asp

Zero-padded day (optional)

function formatDDMMMYYYY_padded(date) {
 const day = String(date.getDate()).padStart(2, '0'); // "05" or "10"
 const month = monthAbbr[date.getMonth()];
 return `${day}-${month}-${date.getFullYear()}`;
}

Use padding if you want “05-Aug-2010” for first-of-month days.

Locale-aware (Intl, no manual month array)

function formatWithIntl(date, locale = 'en-GB') {
 const day = date.toLocaleString(locale, { day: '2-digit' }).replace(/^0/, ''); // "10" or "5"
 const month = date.toLocaleString(locale, { month: 'short' }); // "Aug"
 const year = date.getFullYear();
 return `${day}-${month}-${year}`;
}

console.log(formatWithIntl(new Date(2010,7,10))); // "10-Aug-2010"

Intl and toLocaleString give you locale-correct month labels; see community discussion on assembling format parts here: https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript

js date to string format: reusable functions

If you’ll format dates repeatedly, wrap the logic into a small utility. Keep options for locale and padding.

Example: small, flexible formatter

function formatDateCustom(date, { locale = 'en-GB', padDay = false } = {}) {
 const day = padDay ? String(date.getDate()).padStart(2, '0') : date.getDate();
 const month = date.toLocaleString(locale, { month: 'short' });
 const year = date.getFullYear();
 return `${day}-${month}-${year}`;
}

// Usage
formatDateCustom(new Date(2010,7,10)); // "10-Aug-2010"
formatDateCustom(new Date(2010,7,5), { padDay: true }); // "05-Aug-2010"

A tiny helper like this keeps calling code clean and makes it easy to switch behavior (pad or not, change locale).

date string javascript: Intl.formatToParts (locale-aware)

Intl.DateTimeFormat.formatToParts is handy when you want the actual day/month/year tokens from the formatter rather than a single string.

Example using formatToParts:

function formatUsingParts(date, locale = 'en-GB') {
 const fmt = new Intl.DateTimeFormat(locale, { day: '2-digit', month: 'short', year: 'numeric' });
 const parts = fmt.formatToParts(date);
 const day = parts.find(p => p.type === 'day').value.replace(/^0/, '');
 const month = parts.find(p => p.type === 'month').value;
 const year = parts.find(p => p.type === 'year').value;
 return `${day}-${month}-${year}`;
}

console.log(formatUsingParts(new Date(2010,7,10))); // "10-Aug-2010"

formatToParts avoids brittle string slicing and works reliably across locales. Community answers show this pattern for creating custom-delimited formats from Intl parts: https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript

js string to date (parsing “10-Aug-2010”)

Want to convert “10-Aug-2010” back to a Date? Parse the pieces and map the month abbreviation to a numeric month.

Robust parse function:

function parseDDMMMYYYY(str) {
 if (typeof str !== 'string') return new Date(NaN);
 const [dayStr, monStr, yearStr] = str.split('-');
 if (!dayStr || !monStr || !yearStr) return new Date(NaN);

 const months = {
 Jan:0, Feb:1, Mar:2, Apr:3, May:4, Jun:5,
 Jul:6, Aug:7, Sep:8, Oct:9, Nov:10, Dec:11
 };
 const day = parseInt(dayStr, 10);
 const month = months[monStr];
 const year = parseInt(yearStr, 10);

 if (Number.isNaN(day) || Number.isNaN(year) || month === undefined) return new Date(NaN);
 return new Date(year, month, day); // local-midnight for that date
}

console.log(parseDDMMMYYYY('10-Aug-2010')); // Date object for 2010-08-10 (local time)

Notes:

• Date.parse may or may not accept “10-Aug-2010” consistently across engines. Manual parsing is predictable and portable — see related discussion: https://stackoverflow.com/questions/12409299/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript-and-append-it-to-an-i
• If you need a timezone-agnostic date (so the day never shifts when interpreted in UTC), consider using Date.UTC(year, month, day) and new Date(Date.UTC(…)).

Using libraries: date-fns and moment (optional)

If you already have a date library, formatting becomes trivial.

date-fns (recommended modern choice)

import { format, parse } from 'date-fns';

format(new Date(2010, 7, 10), 'dd-MMM-yyyy'); // "10-Aug-2010"

Moment (works, but larger bundle and legacy)

moment(new Date(2010,7,10)).format('DD-MMM-YYYY'); // "10-Aug-2010"

Libraries handle locales, parsing, and many edge cases; PietschSoft summarizes manual vs. library approaches and shows examples: https://www.pietschsoft.com/post/2023/09/28/javascript-format-date-to-string. For a general primer on the Intl approach and alternatives see this freeCodeCamp guide: https://www.freecodecamp.org/news/how-to-format-a-date-with-javascript-date-formatting-in-js/

Localization and edge cases

A few practical gotchas and choices:

• Locale vs. fixed English abbreviations: If you must always show English month abbreviations (“Aug”), use a fixed month array. If you want the user’s locale, use Intl or toLocaleString.
• Leading zeros: Decide whether days should be “05-Aug-2010” or “5-Aug-2010” and implement padStart accordingly.
• Timezone shifts: new Date(year, month, day) creates a local-midnight date. In some systems converting to UTC or serializing may shift the visible date. Use UTC constructors if you need a timezone-free date-only value.
• Input validation: Parsing should validate month tokens and numeric ranges; return an invalid Date or throw on bad input.
• Machine-readable vs human-readable: For APIs or storage prefer ISO 8601 (YYYY-MM-DD or full ISO) and use “10-Aug-2010” only for display.

Which approach should you pick?

• Minimal dependency, stable English output: manual mapping.
• Locale-aware, zero-dependency: Intl.formatToParts / toLocaleString.
• Complex parsing/formatting and many locales: date-fns (or dayjs) — avoid adding Moment to new projects unless you already use it.

Sources

• https://www.w3schools.com/js/js_date_formats.asp
• https://stackoverflow.com/questions/3552461/how-do-i-format-a-date-in-javascript
• https://www.pietschsoft.com/post/2023/09/28/javascript-format-date-to-string
• https://stackoverflow.com/questions/12409299/how-to-get-current-formatted-date-dd-mm-yyyy-in-javascript-and-append-it-to-an-i
• https://www.freecodecamp.org/news/how-to-format-a-date-with-javascript-date-formatting-in-js/

Conclusion

To get “10-Aug-2010” quickly, the simplest and most portable solution is to map month indexes to a three-letter array and join day, month and year (or use Intl for locale-aware month names). If you need parsing back to a Date, split and map the month abbreviation to its numeric index. For multilingual support or heavier formatting needs, prefer Intl.formatToParts or a small library like date-fns.