How to convert a string to a date in JavaScript in dd-mmm-yyyy format

Converting a string to a date in JavaScript is pretty common, especially when dealing with user input or API responses. Formatting it into dd-mmm-yyyy presents an extra challenge due to JavaScript's Date object peculiarities. In this guide we;ll walk you through the process of parsing a string into a Date object and then formatting it to dd-mmm-yyyy format, which corresponds to a two-digit day, a three-letter month abbreviation, and a four-digit year.

Understand the Date object in JavaScript

JavaScript's Date object represents a single moment in time. It provides methods to parse, manipulate, and format dates. However, it doesn't natively support formatting dates into dd-mmm-yyyy out of the box. Thus, you'll have to convert the date manually after parsing it.

Parse the string into a Date object

To convert a string to a Date object, you can use the Date.parse() method or the new Date() constructor. However, they may not parse all date string formats correctly, especially when dealing with non-standard formats. It's often best to manually parse your string, especially if it's not in a recognized RFC 2822 or ISO format.

// Assuming your date string is in the format "dd/mm/yyyy"
function parseDateString(dateString) {
  let parts = dateString.split('/');
  // Note: months are 0-based in JavaScript
  return new Date(parts[2], parts[1] - 1, parts[0]);
}

let date = parseDateString('31/12/2023');

Format the Date object

After obtaining a Date object, you can format it. JavaScript doesn't have a built-in date formatting method for the dd-mmm-yyyy pattern, so you'll have to construct it manually.

function formatDate(date) {
  const pad = (number) => (number < 10 ? `0${number}` : number);
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  let day = pad(date.getDate());
  let monthIndex = date.getMonth();
  let month = months[monthIndex];
  let year = date.getFullYear();

  return `${day}-${month}-${year}`;
}

let formattedDate = formatDate(date); // "31-Dec-2023"

Consider using a library for complex use cases

If your application frequently manipulates dates and requires more complex date handling, consider using a date manipulation library like date-fns or moment.js. These libraries offer robust functions for parsing and formatting dates, including locale-specific options.

// With moment.js, for example, the formatting becomes straightforward
const moment = require('moment');

function convertStringToDateWithMoment(dateString) {
  // Parse the string into a moment object
  let date = moment(dateString, 'DD/MM/YYYY');
  // Format it to 'dd-mmm-yyyy'
  return date.format('DD-MMM-YYYY');
}

let dateWithMoment = convertStringToDateWithMoment('31/12/2023'); // "31-Dec-2023"

Handle edge cases and invalid inputs

Always ensure to handle edge cases such as invalid date strings. When parsing manually, validate each part of the date, and be aware of issues like leap years and month-specific days.

function isValidDate(year, month, day) {
  let date = new Date(year, month - 1, day);
  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
}

By validating dates and carefully formatting them, you can effectively manage date-related data in your JavaScript applications and represent them in the desired dd-mmm-yyyy format.