JS Startup

Challenges, Tips & Tricks & Tutorials

How to Format Date In JavaScript

How to Format Date In JavaScript

In this javascript tutorial, you’ll be going to learn how to format the date in javascript. Currently, working with a date is a common scenario when creating a web or mobile application.

JavaScript Date Object –

Date is an javascript object which contains a date-time detail. Javascript date fundamentally specified as the number of milliseconds.

// JavaScript Date Syntax
new Date()

JavaScript Date Time

In order to get the current date and time in javascript using the date object. The following statement gives the current date and time object

let date = new Date();

The above code statements give the current date and time. Check the output below.

let current_datetime = new Date();
console.log(current_datetime.toString());

The above code output the current date and time in string as shown.

// Output
"Sat Nov 26 2020 18:55:13 GMT+0530 (India Standard Time)"

Check out our daily javascript quiz – 

  1. JS Quiz – can NaN be really equal to NaN
  2. JavaScript Quiz – can use the reserved keyword as variable
  3. JavaScript Quiz – object keys values method output can be equal
  4. JS Quiz – string match regexp can extract a number value

JavaScript Date Time Format

Javascript date object gives default date-time format with timezone which is based on country location. As there is no inbuilt method to format a javascript date.

But there are still other javascript date method which can help to format the javascript date object.

Change Date Format dd-mmm-yyyy

To convert date to format “dd-mmm-yyyy“, you need to extract the day, month, and year from the date object using the date method.

let current_datetime = new Date();

let current_day = current_datetime.getDate();
let current_month = current_datetime.getMonth() + 1;
let current_year = current_datetime. getFullYear();
let formatted_date = current_day + "-" + current_month + "-" + current_year;

console.log(formatted_date);

The above code statement returns the date in the below format.

// Output
"26-11-2020"

But the javascript date object does not have any method which can convert the month to alphabets format.

For this, you need to create a separate array which contain month list as element and query array based on the month index.

const months = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];

let current_day = current_datetime.getDate();
let current_month = current_datetime.getMonth() ;
let current_year = current_datetime. getFullYear();

let formatted_date = current_day + "-" + months[current_month] + "-" + current_year;

console.log(formatted_date);

The above code statement outputs the below value.

// Output
"26-NOV-2020"

Change Date Format yyyy-mm-dd

In order to convert date to format “yyyy-mm-dd“. It’s the same as the above example but you do need an months array and just need to place year at starting point of date format.

let current_datetime = new Date();

let current_day = current_datetime.getDate();
let current_month = current_datetime.getMonth() + 1;
let current_year = current_datetime. getFullYear();
let formatted_date = current_year + "-" + current_month + "-" + current_day;

console.log(formatted_date);

The output of above statements.

// Output
"2020-11-26"

You can use the months array if you want to convert above output to “2020-NOV-26“.

Change Date Format yyyy-mm-dd hh:mm:ss

As javascript date object not only contains the date method but also has a time method to get time-related details.

let current_datetime = new Date();

let current_day = current_datetime.getDate();
let current_month = current_datetime.getMonth() + 1;
let current_year = current_datetime.getFullYear();

let current_hour = current_datetime.getHours();
let current_minute = current_datetime.getMinutes();
let current_second = current_datetime.getSeconds();

let formatted_date = current_day + "-" + current_month + "-" + current_year;
let formatted_time = current_hour + ":" + current_minute + ":" + current_second;

let formatted_datetime = formatted_date + " " + formatted_time;

console.log(formatted_datetime);

The above statements output the following date format.

// Output
"26-11-2020 20:15:10"

So, javascript itself capable of formatting a date. You do not need use any other library like jQuery to change date time format.

But know you are thinking about the month format which does not have a leading zeros. An what about the time also.

Adding Leading Zeroes In JavaScript DateTime

As, above mention datetime javascript format work well but in the case of day, month, hour, minute and second it fails. When their value is 9 or less than 9.

Because there is not leading zeros with it by default. Let’s take an example. The timing of 04:05:06 actually displayed as 4:5:6.

So, For append leading zeros to day, month, hour, minute and second. You need a custom method.

function appendLeadingZeroes(n){
  if(n 

The output value of above statement have date time with leading zeros.

// Output
"26-09-2020 20:06:04"

Date Format in Local

Javascript date can also be formatted based on the local language. Javascript date object has toLocaleDateString() a method that accepts two parameter local language and options.

const date = new Date();

const options = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
};

console.log(date.toLocaleDateString("en-US", options));

The above code give an output value.

// Output
Sunday, September 27, 2020

Last But Not The Least

In this tutorial, you learned how to format or change date time in javascript. All the above mention method belongs to javascript date object for modifying the date time format.

You can use a library called Moment.js to change the date time format. As it makes conversion easier.

Conclusion

To participate in our javascript quiz or challenges, tutorial, tips & tricks make sure to join our jsstartup newsletter. So, you can able to participate in our daily challenges & learn the javascript concept.

And last but not the least, don’t forget to like, comment and share. It gives us a morale boost to remain to continue. Also, join our Facebook Page

If you have any questions, please feel free to ask me in the comment section and also let me know if you have any suggestions. As suggestions are always welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top
0 Shares
Share via
Copy link