Tutorials Tonight
Follow Us

Format JavaScript Date - Make Date Human Readable


In this article, we are going to learn how to format a JavaScript date in a human readable format. We will create a few methods and also look at some predefined methods like toLocaleDateString() to format a JavaScript date in a locale-specific way.

The Date object gives us the current date and time in javascript.

The key information like date, month, year, hours, minutes are not in an easily readable format. We have to extract the information and then convert it to the format we read or write date and time.

javascript date format

To convert the standard date format into the format shown in the above image javascript provide some methods to convert it, also you can create your own method for the same.

First, we will create our own method to convert the date format then we will use built-in methods.


Creating Date Formatting Function

Let's create our own method to convert the date format.

We are going to create a function to convert the date format to the following format:

Creating function

To format the date in order like any of mentioned above we have to first get a date, month, and year from the date object and then order the date in the format mentioned above by creating a function.

Example

function dateFormater(date, separator) {
  var day = date.getDate();
  // add +1 to month because getMonth() returns month from 0 to 11
  var month = date.getMonth() + 1;
  var year = date.getFullYear();

  // show date and month in two digits
  // if month is less than 10, add a 0 before it
  if (day < 10) {
    day = '0' + day;
  }
  if (month < 10) {
    month = '0' + month;
  }

  // now we have day, month and year
  // use the separator to join them
  return day + separator + month + separator + year;
}

var now = new Date();
console.log(dateFormater(now, '/'));
console.log(dateFormater(now, '-'));
console.log(dateFormater(now, '.'));

javascript format date yyyy-mm-dd

To format date as yyyy-mm-dd we need to just rearrange the returning value of the dateFormater() function.

Example

function dateFormater(date, separator) {
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();

  // show date and month in two digits
  if (day < 10) {
    day = '0' + day;
  }
  if (month < 10) {
    month = '0' + month;
  }

  // now we have day, month and year
  // use the separator to join them
  return year + separator + month + separator + day;
}

var now = new Date();
console.log('yyyy-mm-dd => ' + dateFormater(now, '-'));

Format Date month dd, yyyy

An example of month dd, yyyy format could be January 01, 2020.

For this, we can create an array of months and then use the array index to get the month name.

Example

function dateFormater(date) {
  var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  var day = date.getDate();
  var month = months[date.getMonth()];
  var year = date.getFullYear();

  // show date in two digits
  if (day < 10) {
    day = '0' + day;
  }

  // now we have day, month and year
  // arrange them in the format we want
  return month + ' ' + day + ', ' + year;
}

console.log(dateFormater(new Date()));

Using Built-in Methods

JavaScript has some built-in methods to format the date. We will look at all the useful methods that can help you to format the date.

Date.toLocaleDateString()

The toLocaleDateString() method returns a formatted string date in the local language and country.

The toLocaleDateString() method takes two arguments, the first one is the language code and the second one is the format of the date.

Syntax:

date.toLocaleDateString(languageCode, format)

The language code could be:

The format of date is an object which contains 5 informations { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' } where all the informations are optional and can be used in any combination.

Example

var date = new Date();
var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };

console.log(date.toLocaleDateString('en-US', options));
console.log(date.toLocaleDateString('hi-IN', options));
console.log(date.toLocaleDateString('es-ES', options));
console.log(date.toLocaleDateString('fr-FR', options));
console.log(date.toLocaleDateString('de-DE', options));

Let's see another example for different combinations of options.

Example

var date = new Date();

console.log(date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }));
console.log(date.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }));
console.log(date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long' }));
console.log(date.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric' }));

Date.toLocaleTimeString()

The toLocaleTimeString() method returns a formatted string time in the local language and country.

The toLocaleTimeString() method takes language code as an argument.

Syntax:

date.toLocaleTimeString(languageCode)

Here is an example:

Example

var date = new Date();

console.log(date.toLocaleTimeString('en-US'));
console.log(date.toLocaleTimeString('hi-IN'));
console.log(date.toLocaleTimeString('ko-KR'));

Date.toDateString()

The toDateString() method returns a formatted string in English in the format of Day Month dd yyyy. Example: Wed May 02 2012.

Example

var date = new Date();

console.log(date.toDateString());

Date.toTimeString()

The toTimeString() method returns the time of a Date in a readable format in the English language.

Example

var date = new Date();

console.log(date.toTimeString());

Conclusion

We have discussed both the built method and the custom method to format the date in this article. You can use any of them to format the date.

Also with little modification in the custom method, you can also create another format for your use.