How To Format Date In JavaScript

In this tutorial, you will be going to learn how to format date in javascript. Formatting Date in javascript is not an easy task as we do not have any inbuilt function or method for that. JavaScript has new Date() which give a date in ISO format.

Format Date in JavaScript is a common task which every developer need to do when he needs to show data or filter data based on date. Formatting date also of different-different type like you want a custom date format or either custom DateTime format.

So in this post, we try to cover all type of date and DateTime format in javascript. That’s why to stick to the end so you’ll not be going to miss any important part.

You can check other javascript series :

  1. How To Loop Through An Array In JavaScript
  2. Convert PHP array to JavaScript array
  3. How To Empty An Array In JavaScript
  4. Remove duplicates from javascript array
How to format date in javascript
How to format date in javascript

How To Format Date In JavaScript

Table Of Content

  • Get Current Date And Time In JavaScript
  • Javascript Date Object Method
  • Change Date Time Format dd-mm-yyyy
  • Append Leading Zero In DateTime
  • Change Date Time Format mm-dd-yyyy
  • Change Date Format dd-mmm-yyyy
  • Change DateTime Format yyyy-mm-dd hh:mm:ss
  • Conclusion

So now we are going to discuss all the above point step by step.

Javascript: Get Current Date And Time

In javascript, you can get the current date and time using a javascript date object. Javascript date object gives a date in ISO Format which is a default format.

// getting current date time
let current_datetime = new Date();

// print result
console.log(current_datetime)

// result => Sun Jul 28 2019 12:48:41 GMT+0530 (India Standard Time)

In the above example, you will get the current date and the current time in javascript using simple date object provide by javascript.

But now as a developer, our task begins now because you’ll not be going to show ISO DateTime to the user. For this, we need to formatting in javascript.

JavaScript date object also contains some useful method which will help to format date and time in javascript.

JavaScript Date Object Method

MethodDescription
getFullYear()
Get the year as a four digit number (yyyy)
getMonth()Get the month as a number (0-11)
getDate()Get the day as a number (1-31)
getHours()
Get the hour (0-23)
getMinutes()Get the minute (0-59)
getSeconds()Get the second (0-59)
getMilliseconds()Get the millisecond (0-999)
getTime()Get the time (milliseconds since January 1, 1970)
getDay()Get the weekday as a number (0-6)
Date.now()Get the time. ES5 ( ECMASCRIPT 5 ).

So the above method helps to format date in javascript.

Change Date Time Format dd-mm-yyyy

Now to convert data in dd-mm-yyyy format in javascript. we need to extract each part like day, month and year from the date object.

Now move to our code section which gives you more clarity.


// getting current date time
let current_datetime = new Date();

let formatted_date = current_datetime.getDate() + "-" + (current_datetime.getMonth() + 1) + "-" + current_datetime.getFullYear()

// print result
console.log(formatted_date)

// result => 28-7-2019

In the above example, we concatenate all the parts of the date and get our required date format. But as we get month just in one digit. But we need an mm format so we need to add a leading zero to month if it is less than 10.

Append Leading Zero In DateTime

So to get proper date format either for dd-mm-yyyy, mm-dd-yyyy, and yyyy-mm-dd we need to add leading zero before it using below code.

// use to append leading zeros to number
function appendLeadingZero(n){
  if(n <= 9){
    return "0" + n;
  }
  return n
}

// print the result
console.log(appendLeadingZero(7))

// result => 07

// print the result
console.log(appendLeadingZero(11))

// result => 11

Now let’s use the above example with the DateTime format function.

But we can also optimize and make it reusable like below code.


// use to append leading zeros to number
function appendLeadingZero(n){
  if(n <= 9){
    return "0" + n;
  }
  return n
}

// function to get formatted date
function format_date(date){
  return appendLeadingZero(date.getDate()) + "-" + appendLeadingZero((date.getMonth() + 1)) + "-" + date.getFullYear()
}

// getting current date time
let current_datetime = new Date();

let formatted_date = format_date(current_datetime)

// print result
console.log(formatted_date)

// result => 28-7-2019

So we get our required format like dd-mm-yyyy now let’s see for other formats also which depend on the requirement.

Change Date Time Format mm-dd-yyyy

In order to change date format like mm-dd-yyyy, you can use the above method as well. Just you need to change the position of the getMonth() method.

Let’s see it in action


// function to get formatted date
function format_date(date){
  return  (date.getMonth() + 1) + "-" + date.getDate() + "-" + date.getFullYear()
}

// getting current date time
let current_datetime = new Date();

let formatted_date = format_date(current_datetime)

// print result
console.log(formatted_date)

// result => 7-28-2019

So it’s up to you what type for DateTime format you want for your project.

Change Date Format dd-mmm-yyyy

Now it’s easy to get dd-mm-yyyy, yyyy-mm-dd and may more format like -his but if you want custom format like getting a month in alphabets but only starting three or more words.

Let’s implement the above format is an example.


// function to get formatted date
function format_date(date){
const month_array = ["JAN", "FEB", "MAR","APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"];
  return  date.getDate() + "-" + month_array[date.getMonth()] +"-"+ date.getFullYear()
}

// getting current date time
let current_datetime = new Date();

let formatted_date = format_date(current_datetime)

// print result
console.log(formatted_date)

// result => 28-JUL-2019

So we have created an array which contains all months, depending on the value of getMonth() we pass it as an index of the array to get the suitable month.

Not only date but you can change DateTime format in javascript like dd-mm-yyyy hh:mm:ss.

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

As we have already shared you above the methods of date in javascript in which some of them used to extract time also. So if you want to format time and date together. you can do that.

So let’s see DateTime format in the javascript example.


// function to get formatted date
function format_date(datetime){
  return  datetime.getDate() + "-" + (datetime.getMonth()+1)+ "-"+ datetime.getFullYear() + " " + datetime.getHours() + ":" + datetime.getMinutes() + ":" + datetime.getSeconds()
}

// getting current date time
let current_datetime = new Date();

let formatted_date = format_date(current_datetime)

// print result
console.log(formatted_date)

// result => 28-7-2019 14:41:1

Conclusion :

As you can see there are many ways you can implement for how to format date in javascript

We have used only functions and functionality provide by JavaScript only like a new Date() and date methods

But we can also use a library like moment.js to get the same result.

I hope you read the full article and I am very excited to get a comment on this post to get your review.

If you have any question please feel free to ask me in the comment section and also let me know if you have any suggestion is also acceptable. Also, like our Facebook Page.

You can also check :

  1. Phone Number Validation in HTML5
  2. Convert PHP array to JavaScript array
  3. Get Multiple Elements By Id Using Javascript
  4. Remove duplicates from a javascript array

Leave a Reply

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