How to Format Dates in JavaScript (With Examples)
How to Create a Date
We create a new date by newing up a Date object.
There are four ways to initialize a Date object:
#1 Empty constructor
const date = new Date();This will give you the current date in GMT.
#2 With string as an argument
const date = new Date('2020-03-25');#3 milliseconds as an argument
const date = new Date(1580321630000);The argument here is the number of milliseconds since the 1st of January 1970.
That number is kind of weird to have in memory, so this is something I never use.
#4 With multiple arguments as numbers
new Date(year, month, day, hour, minutes, seconds, milliseconds);To create this date: 2020-03-25, we type this:
const date = new Date(2020, 02, 25);Notice that we typed in 02 as the month parameter, but the result is 03 (March). This is because the month parameter is zero index-based. It is easy to make a mistake here so beware!
Formatting Dates
Let’s say we have the date 25th of March 2020. We will use that as an example for the rest of the article.
Built-in Functions
The Date object has some built-in formatting functions we can use. Let’s see some examples of the outputs with our example date.
const date = new Date(2020, 02, 25);
console.log(date.toDateString()); // Wed Mar 25 2020
console.log(date.toISOString()); // 2020-03-24T23:00:00.000Z
console.log(date.toLocaleDateString()); // 2020-3-25
console.log(date.toString()); // Wed Mar 25 2020 00:00:00 GMT+0100 (GMT+01:00)Note that the outputs above will depend on where you are in the world.
We can use the toLocaleDateString function to customize our formatting. Here is an example:
const date = new Date(2020, 02, 25);
var optionShort = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
var optionLong = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(date.toLocaleDateString('en-US', optionShort)); // Wed, Mar 25, 2020
console.log(date.toLocaleDateString('en-US', optionLong)); // Wednesday, March 25, 2020The first argument we set the language. The second parameter is an options object where we can configure how the formatting should be.
If we set it to be the German language, it will look like this:
const date = new Date(2020, 02, 25);
var optionShort = { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric' };
var optionLong = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
console.log(date.toLocaleDateString('de-DE', optionShort)); // Mi., 25. März 2020
console.log(date.toLocaleDateString('de-DE', optionLong)); // Mittwoch, 25. März 2020This is an excellent method to use if you need to support multiple languages.
Custom Date Formats
If not any of the built-in date functions fit your use case, then we must do some custom coding.
The Date object has some helpful functions we can use to create custom date formatting. These are:
- getDay()
- getDate()
- getMonth()
- getFullYear()
Here is an example to show which values you get from each function:
const date = new Date(2020, 02, 25);
const day = date.getDay(); // 3
const dayOfMonth = date.getDate(); // 25
const month = date.getMonth(); // 2
const year = date.getFullYear(); // 2020So let’s use these functions to format our example date to Wednesday, 25th of March 2020.
const days = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
]
const months = [
'January',
'February',
'March',
'April',
'May',
'June',
'July',
'August',
'September',
'October',
'November',
'December'
]
const date = new Date(2020, 02, 25);
const day = date.getDay();
const dayOfMonth = date.getDate();
const month = date.getMonth();
const year = date.getFullYear();
console.log(`${days[day]}, ${dayOfMonth}th of ${months[month]} ${year}`);As you can see, with this information, we can format our dates in JavaScript any way we want!
