Snippet for formatting dates in JavaScript

If you’re working with dates in JavaScript, you may have found that the built-in Date object doesn’t always provide the formatting options you need. This is especially true if the dates you’re working with are coming from a database, and are not in the format expected by the Date object.

In this case, you’ll need to use a function like formatDate() to convert the date into a format that the Date object can understand.

In this blog post, we’ll take a closer look at how the formatDate() function works, and how you can use it to convert dates from a database into the proper format.

To understand how this function works, let’s take a closer look at the code:

const formatDate = (date) => {
  var inputDate = date;
  var dateParts = inputDate.split("-");
  var date = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
  var ordinalSuffixes = ["th", "st", "nd", "rd"];
  var day = date.getDate();
  var suffix = "";
  if (day % 10 === 1 && day !== 11) {
    suffix = ordinalSuffixes[1];
  } else if (day % 10 === 2 && day !== 12) {
    suffix = ordinalSuffixes[2];
  } else if (day % 10 === 3 && day !== 13) {
    suffix = ordinalSuffixes[3];
  } else {
    suffix = ordinalSuffixes[0];
  }
  var monthNames = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  var month = monthNames[date.getMonth()];
  var year = date.getFullYear();
  var outputDate = day + suffix + " " + month + " " + year;
  return outputDate;
};

The formatDate function is a useful tool for formatting a date in the form of a string. The function takes a date in the format of a string as an input, with the date formatted as YYYY-MM-DD. It then splits the date string into its individual parts: the year, the month, and the day. These parts are used to create a new Date object, which is used to extract the day, month, and year in a format that can be manipulated.

Next, the function determines the ordinal suffix for the day. For example, if the day is the 1st, it would be “st”, if it is the 2nd, it would be “nd”, and so on. The ordinal suffix is determined by using the modulo operator to find the remainder of the day divided by 10. If the remainder is 1, the suffix is “st”, if it is 2, the suffix is “nd”, and so on.

Once the ordinal suffix has been determined, the function uses an array of month names to convert the numerical value of the month into its corresponding name. For example, if the month is 1, the name would be “January”, if it is 2, the name would be “February”, and so on.

Finally, the function combines the day, month, year, and ordinal suffix into a single string, and returns this string as the output. This string is formatted as “day + ordinal suffix + month + year”. For example, if the input date is “2022-12-11”, the output would be “11th December 2022”.

The formatDate function is a useful and convenient way to format a date string into a more readable and presentable form. It is simple to use, and can easily be incorporated into any project that requires the manipulation of dates.

In conclusion, the formatDate function is a useful tool for formatting dates in JavaScript. It allows you to take a date in string format and convert it into a more human-readable form. Whether you’re working with dates from a database or simply want to present dates in a more user-friendly way, the formatDate function is a simple and convenient solution. Give it a try in your next JavaScript project and see the benefits for yourself.

Thank you for reading this far.