How To Convert A Full Date To A Short Date In JavaScript

If you don’t know how to convert a full date to a short date in JavaScript, don’t worry. Learn more about it with the explanation and examples below.

Convert a full date to a short date in JavaScript

The date object in JavaScript is where time matters are handled. We can initialize a current full date by:

Code:

new Date();

By this initialization, the return value will be a fulldate from years to milliseconds. So there are some ways to convert a full date to a short date in JavaScript.

Using toLocaleDateString() method

The JavaScript date toLocaleDateString() method converts a date to a string using the current Locale convention.

Syntax:

Date.toLocaleString()

Parameter: None

Here we will take advantage of each locale’s time template so that we will use locale US, and the returned time will be in the format MM/DD/YYYY.

Code:

var fullDate = new Date();

// Change Date format to locale US
var shortDate = fullDate.toLocaleDateString("en-US");

return (
    <div>
      <h2>Convert a Full Date to a Short Date | LearnShareIT</h2>
      <hr />
      <h3>Full Date: {JSON.stringify(fullDate)}</h3>
      <h3>Short Date: {shortDate}</h3>
    </div>
  );

Output:

So from a rather long full date of twenty-four characters, after using the .toLocaleDateString(“en-US”) method, the string has been shortened to ten characters representing the current day, month, and year.

Using getDate(), getMonth() and getFullYear() method

The getDate() method is used to get the DATE of a date object.

The JavaScript date.getMonth() method returns the local time month for the given date. A number between 0 and 11 is returned by getMonth(). January is represented by 0, February by 1, and so on.

The JavaScript date getFullYear() method returns the year of the given date in Local time.

Through the above three basic definitions, we got each part of the particular day, month, and year of a full Date, so how do we combine them into a short date but still have enough information? See the example below.

Code:

var fullDate = new Date();

// Get day, month, year from Date object
const formatDate = `${fullDate.getMonth() + 1}
    / ${fullDate.getDate()}
    /${fullDate.getFullYear()}`;
return (
    <div>
      <h2>Convert a Full Date to a Short Date | LearnShareIT</h2>
      <hr />
      <h3>Full Date: {JSON.stringify(fullDate)}</h3>
      <h3>Short Date: {formatDate}</h3>
    </div>
  );

In the code, we can see that formatDate is defined as a string, which will be responsible for concatenating the substrings of day, month, and year into a complete short date. Note here that the getMonth method will return a month that is one unit less than the original month, so we have to add an offset for it. Hope these methods are helpful to you.

Summary

To summarize, this article shows you two ways to convert a full date to a short date in JavaScript. You can use toLocaleDateString() or getDate(), getMonth() and getFullYear() method to get the same result. Good luck for you!

Maybe you are interested:

• Set only the Date ignoring Time in JavaScript
• Increment a Date by 7 Days in JavaScript
• Convert HH:MM:SS to Seconds using JavaScript

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs