How to Format JavaScript Date as String: Complete Guide

JavaScript doesn’t provide a built-in method to format Date objects as strings like ‘10-Aug-2010’, but you can achieve this using the Intl.DateTimeFormat API, custom formatting functions, or date libraries. The most straightforward approach is using Intl.DateTimeFormat with specific options and then joining the components with the desired delimiter.

Contents

• Using Intl.DateTimeFormat
• Custom Formatting Function
• Using Date Libraries
• Complete Examples
• Best Practices

Using Intl.DateTimeFormat

The Intl.DateTimeFormat API provides a modern, built-in way to format dates with specific locales and options. For the ‘10-Aug-2010’ format, you can use the following approach:

const date = new Date('2010-08-10');
const formatted = new Intl.DateTimeFormat('en-GB', {
  year: 'numeric',
  month: 'short',
  day: '2-digit'
}).format(date)
  .replace(/\s/g, '-');

console.log(formatted); // "10-Aug-2010"

How this works:

• 'en-GB' locale produces day-month-year ordering
• year: 'numeric' gives full year (2010)
• month: 'short' gives abbreviated month name (Aug)
• day: '2-digit' gives zero-padded day (10)
• .replace(/\s/g, '-') replaces spaces with hyphens

As shown in the Stack Overflow answer, this method leverages JavaScript’s built-in internationalization capabilities.

Custom Formatting Function

For more control or to avoid locale dependencies, you can create a custom formatting function:

function formatDateToCustom(date) {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
  const day = date.getDate().toString().padStart(2, '0');
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  
  return `${day}-${month}-${year}`;
}

// Usage
const date = new Date('2010-08-10');
console.log(formatDateToCustom(date)); // "10-Aug-2010"

This approach gives you complete control over the formatting and works consistently across all environments. As noted in the GeeksforGeeks guide, using arrays for month names is a common pattern in JavaScript date formatting.

Using Date Libraries

For complex applications, using a dedicated date library is often the best approach. Here are some popular options:

date-fns

import { format } from 'date-fns';

const date = new Date('2010-08-10');
const formatted = format(date, 'dd-MMM-yyyy');
console.log(formatted); // "10-Aug-2010"

Luxon

import { DateTime } from 'luxon';

const date = DateTime.fromISO('2010-08-10');
const formatted = date.toFormat('dd-MMM-yyyy');
console.log(formatted); // "10-Aug-2010"

Moment.js (legacy)

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

As mentioned in the Pietschsoft article, libraries like date-fns and Luxon provide more robust solutions for production applications.

Complete Examples

Example 1: Basic Formatting Function

function formatDateString(date) {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
  // Ensure day is 2 digits
  const day = date.getDate().toString().padStart(2, '0');
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  
  return `${day}-${month}-${year}`;
}

// Test with the specific date
const testDate = new Date('2010-08-10');
console.log(formatDateString(testDate)); // "10-Aug-2010"

Example 2: More Flexible Function

function formatDateCustom(date, format = 'dd-MMM-yyyy') {
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  
  let formatted = format;
  
  // Replace day placeholders
  formatted = formatted.replace('dd', date.getDate().toString().padStart(2, '0'));
  formatted = formatted.replace('d', date.getDate().toString());
  
  // Replace month placeholders
  formatted = formatted.replace('MMM', months[date.getMonth()]);
  formatted = formatted.replace('MM', (date.getMonth() + 1).toString().padStart(2, '0'));
  
  // Replace year placeholders
  formatted = formatted.replace('yyyy', date.getFullYear());
  formatted = formatted.replace('yy', date.getFullYear().toString().slice(-2));
  
  return formatted;
}

// Usage
console.log(formatDateCustom(new Date('2010-08-10'))); // "10-Aug-2010"
console.log(formatDateCustom(new Date('2010-08-10'), 'dd/MM/yyyy')); // "10/08/2010"

Best Practices

When formatting dates in JavaScript, consider these best practices:

1. Know Your Environment: The Intl.DateTimeFormat approach works in modern browsers and Node.js, but may have limitations in older environments.

2. Handle Edge Cases: Always consider dates that might have single-digit days or months:

   javascript

   const day = date.getDate().toString().padStart(2, '0');
   

3. Time Zone Awareness: Be aware that Date objects work with the local timezone by default. For consistent results:

   javascript

   const utcDate = new Date(Date.UTC(2010, 7, 10));
   

4. Library Choice: For production applications, consider using a date library like date-fns or Luxon for better reliability and features.

5. Performance: For simple formatting needs, custom functions are often faster than library solutions.

6. Consistency: Use the same formatting approach throughout your application for consistency.

As the MDN documentation explains, JavaScript Date objects can handle various input formats, but output formatting requires additional work.

Conclusion

Formatting a JavaScript Date object as ‘10-Aug-2010’ can be achieved through several approaches:

1. Use Intl.DateTimeFormat for built-in internationalization support with minimal code
2. Create custom functions for complete control over formatting logic
3. Leverage date libraries like date-fns or Luxon for production applications

The choice depends on your project requirements, environment constraints, and team preferences. For most modern applications, the Intl.DateTimeFormat approach provides a good balance of simplicity and functionality, while custom functions offer maximum control without external dependencies.

Remember to consider timezone handling, edge cases, and performance implications when implementing date formatting in your applications.

Sources

1. How to format a JavaScript date - Stack Overflow
2. JavaScript: Format Date to String | Chris Pietschmann
3. How to Format a Date in JavaScript? - GeeksforGeeks
4. Date - JavaScript | MDN
5. How to format a JavaScript date - Stack Overflow
6. Format JavaScript Date (with Examples)
7. How to Format a JavaScript Date | Delft Stack