How to Format a Date in JavaScript
John on August 27, 2020
More often than not one turns to third party libraries such as Moment.js to format dates in JavaScript, however, it is possible to convert dates in a variety of useful formats using vanilla JavaScript.
In this guide, we will cover getting the current date in JavaScript and the different ways it can be formatted.
Get the Current Date and Time in JavaScript
Firstly let's create a new date object, it will be the current date and time according to your machine.
let date = new Date();
Date to String and Format
With the Date object we can use a collection of the following native JavaScript methods to both convert the object to a string and format the date into a new format.
date.toString()
Thu Aug 27 2020 05:17:24 GMT+0100 (British Summer Time)
date.toDateString()
Thu Aug 27 2020
date.toTimeString()
05:19:09 GMT+0100 (British Summer Time)
date.toUTCString()
Thu, 27 Aug 2020 04:20:08 GMT
date.toISOString()
2020-08-27T04:20:31.660Z
date.toLocaleString()
27/08/2020, 05:21:01
date.toLocaleTimeString()
05:21:17
DD-MM-YYYY Format
To get a date in the DD-MM-YYYY format in pure JavaScript we can use JavaScripts get methods available on the Date object.
let date = new Date();
let formatted = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
console.log(formatted);
27-8-2020
YYYY-MM-DD HH:MM:SS Format
Here is another example, this time with hours minutes and seconds included.
let date = new Date();
let formatted = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds()
console.log(formatted);
27-8-2020 21:1:26
Numerical Month to Words
There is no way to natively provide months in a written format in a custom date format. We can make a function that does this by creating an array of months then using the getMonth method to select a month by its index.
let date = new Date();
let m = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
let formatted = date.getDate() + "-" + m[date.getMonth()] + "-" + date.getFullYear();
console.log(formatted);
27-Aug-2020
The JavaScript get Date Methods
Here are all the main get methods that are available on the JavaScript Date object. They are useful for obtaining single numerical elements from a date such as the day of the week and the date of the month.
date.getDate()
27
getDay is a numerical representation of the day of the week - Monday 1, Tuesday 2 .etc.
date.getDay()
4
note - months start from 0, like an array index.
date.getMonth()
7
date.getFullYear()
2020
note - getSeconds starts at 0 and ends at 59.
date.getSeconds()
34
date.getMinutes()
9
date.getHours()
21
date.getMilliseconds()
942
date.getTime()
1598559053232
date.getTimezoneOffset()
-60
Convert Date to UTC in JavaScript
JavaScript has a built-in collection of get methods to convert a local timezone into UTC. It works by adapting the time on your device based on its timezone.
date.getUTCDate()
27
date.getUTCDay()
4
date.getUTCFullYear()
2020
date.getUTCMonth()
8
date.getUTCHours()
20
date.getUTCMinutes()
17
date.getUTCSeconds()
30
date.getUTCMilliseconds()
110
Conclusion
You now know how to convert dates into many different formats using JavaScripts built-in formatting methods.
