Javascript convert date to mm/dd/yyyy - How to Format a Date as MM/DD/YYYY in JavaScript?

Javascript convert date to mm/dd/yyyy: To format a date in the format mm/dd/yyyy follow the below steps:

To obtain the month, day, and year of a date, use the getMonth(), getDate(), and getFullYear() functions respectively.
If the value is less than 10, add a leading zero to the day and month digits.
Add the above output result to an array and join them with a forward slash(/) separator.

Let us see an example to understand it more clearly.

index.js:

// Create a function say paddingDigits by passing the number
// as an argument to it which returns the digits padded
// value 
function paddingDigits(gvn_number) {
  // Here it adds a leading zero if the month or day only
  // contains a single digit (less than 10) using the
  // padStart() function.
  // The toString() functions converts it into a string(type conversion)
  return gvn_number.toString().padStart(2, '0');
}

// Create a function say formattingDate by passing the date
// as an argument 
function formattingDate(gvn_date) {
  // Return the above date in the mm/dd/yyyy format using the
  // getMonth(), getDate(), getFullYear() functions and
  // separate them with '/' with the help of join() function
  return [
    paddingDigits(gvn_date.getMonth() + 1),
    paddingDigits(gvn_date.getDate()),
    gvn_date.getFullYear(),
  ].join('/');
}

// Create a new date object and pass it as an argument to the
// formattingDate() function
// Here new Date() creates the date object of the current day
console.log(formattingDate(new Date()));

// Pass some random year, month, day to the above 
// formattingDate() function and print the result
// Here we are giving the date object manually.
console.log(formattingDate(new Date(2022, 7, 23)));

Output:

06/14/2022
08/23/2022

Explanation:

Here the new Date() creates the date object of the current day

Here the paddingDigits() function, adds a leading zero if the month or day only contains a single digit (less than 10).

// Create a function say paddingDigits by passing the number
// as an argument to it which returns the digits padded
// value 
function paddingDigits(gvn_number) {
  // Here it adds a leading zero if the month or day only
  // contains a single digit (less than 10) using the
  // padStart() function.
  // The toString() functions converts it into a string(type conversion)
  return gvn_number.toString().padStart(2, '0');
}

console.log(paddingDigits(2)); 
console.log(paddingDigits(5)); 
console.log(paddingDigits(11));

Here we used the padStart() function to ensure that the output is always constant and has 2 digits for the months and days.

Since the argument, we passed to the paddingDigits() function is the total length of the string, it will never pad the day or month if they already have two digits.

Functions used to Format Date:

gvn_date.getMonth(): It gives an integer between 0(jan) and 11(December) that indicates the month for a specified date. The getMonth method is off by 1.

gvn_date.getDate(): It gives an integer between 1 and 31 that represents the day of the month for a given date.

gvn_date.getFullYear(): It gives a four-digit number indicating the year corresponding with a date.

NOTE:

The getMonth function is zero-indexed and provides a month index ranging from 0 to 11,
indicating that January is 0 and December is 11.

Hence we added the return value of the getMonth function by 1 since it is zero-based.

The final step in the method was to arrange the results in an array so that we could join them with a forward slash( /) separator.

console.log(['04', '26', '2024'].join('/')); 
console.log(['12', '08', '2020'].join('/'));

Output:

04/26/2024
12/08/2020

This formats the given date in mm/dd/yyyy format.

Javascript convert date to mm/dd/yyyy – How to Format a Date as MM/DD/YYYY in JavaScript?

Related