How to Format a Date in JavaScript?

Struggling to get the right format with dates in JavaScript? Want to transform one type of data into a date?

In your journey as a JavaScript developer, you’ll inevitably encounter date formatting.

To format a JavaScript date in your local standard date format, use the toLocaleDateString() method applied to a Date object. Thus, new Date().toLocaleDateString() will return today’s date in your local format.

Some dates will be strings, others timestamps, and others date formats you might not be familiar with.

There are several ways to manipulate and format dates in JS:

• Use JavaScript Date object methods
• Use Node.js libraries like moment.js or dateformat
• Code your own functions to display dates

Let’s delve into how to format dates in JavaScript without further delay!

The Date Object in JavaScript

The Date object constructor takes many elements as parameters.

new Date() // creates a Date object with the time at instantiation
new Date(timestamp) // takes a "timestamp" number
new Date(string) // takes a string parseable as Date.parse()

new Date(year, monthIndex) // monthIndex starts at 0, March is 2, May is 4
new Date(year, monthIndex, day)
new Date(year, monthIndex, day, hour)
new Date(year, monthIndex, day, hour, minute)
new Date(year, monthIndex, day, hour, minute, seconds)
new Date(year, monthIndex, day, hour, minute, seconds, milliseconds)

toDateString() in JavaScript

The toDateString() method returns a string containing, in English:

• The day in 3 letters
• The month in 3 letters
• The day of the month in 2 digits
• The year in 4 digits

For example, with today’s date:

const myDate = new Date()

myDate.toDateString() // 'Wed Oct 20 2021'

toUTCString() in JavaScript

The toUTCString() method returns a string similar to toDateString() but with the time and the time zone:

const myDate = new Date()

myDate.toUTCString() // 'Wed, 20 Oct 2021 12:50:02 GMT'

Converting a Timestamp to a JavaScript Date

A timestamp is a time unit specific to computer systems like UNIX. If you need to format a timestamp into a date in JavaScript, you can create a Date object from a timestamp.

If it’s a 10-digit UNIX timestamp you’re using, you’ll need to multiply the timestamp value by 1000. JavaScript timestamps consider milliseconds, unlike UNIX timestamps that stop at seconds, so you need to provide the additional 4 digits.

const timestamp = new Date(1634726212 * 1000)

Converting a String to a JavaScript Date

As seen, the JavaScript Date object constructor also takes a string as a parameter.

new Date(string) // takes a string parseable as Date.parse()

💡 However, this way of instantiating a date is strongly discouraged because the result depends on

the internet browser of the person executing the JavaScript code.

A better solution is to use moment.js, which has a much more reliable date instantiation method.

What is moment.js?

moment.js is a node.js package designed to simplify, make date usage in JavaScript more reliable, and easier. Moment.js allows parsing, validating, manipulating, and displaying dates and times in your JS code.

How to Install moment.js?

Like other node packages, you can install moment.js with npm, yarn, or another node package manager.

npm install moment --save   # with npm
yarn add moment             # with Yarn

Timestamp to JavaScript Date Object with moment.js

Another solution is to use the moment.js library. Using the unix function takes your UNIX timestamp in the correct format without requiring you to multiply it by 1000.

import moment from "moment"

const timestamp = moment.unix(1634726212)

To display it in the format you desire, simply apply the format method to your timestamp object.

timestamp.format("dd/mm/yy") // 11:36:52

What is dateformat?

You’re not alone in finding the JavaScript Date object particularly complex. Others before you, and in earlier versions of JavaScript. Steven Levithan came up with a JavaScript library to make life easier.

Over time, other developers have taken up the project and ported it to node.js.

To install it with npm:

npm install dateformat

Timestamp to JavaScript Date Object with dateformat

dateformat is another JavaScript library that allows manipulation and formatting of Date objects in JavaScript into the format you desire.

import dateFormat from "dateformat"

const now = new Date()
dateFormat(now, "dd/mm/yyyy")

How do you Format Dates in JavaScript?

And there you have it! You now know how to change date formats in JS, regardless of their initial form.

Dates are part of a long list of APIs, methods, and tricks that will make your JavaScript practice much simpler. Mastering all these concepts will save you a considerable amount of time.