JavaScript has an inbuilt object called Date Object, which works with date and time in a platform-independent format; it represents the number of seconds passed since midnight of January 1970 by the ECMAScript standard.
In this post, we will learn different methods to change the format of date in JavaScript;
but to do that, first, we will need a variable to store the value of the date. JavaScript has an inbuilt data type (date object) that can be used to store dates.
Note: We will use the browser console to demonstrate examples performed in this post. To open up the browser console:
- use the F12 key in Chrome and other chromium-based browsers.
- use CTRL + SHIFT + K keyboard shortcut keys for Mozilla.
- use Option + ⌘ + C keyboard shortcut keys in Safari (if developer menu does not appear, then open Preferences by pressing ⌘ +, and in Advanced tab check “Show Develop menu in menu bar”).
How to create a Date Object in JavaScript?
In JavaScript, we can use the new Date() method to create a date object.
console.log(date);
The new Date() function without any parenthesis creates an object with the current date. We can also pass arguments to the new Date() function to create new date objects with specified date and time. Please see this article to know more about the Date Object and methods which we can use to operate on the date object.
How to format the Date Object
In JavaScript, we have different methods which can be used to get the date in the required format. Here’s a list of a few of the methods that can be used to format the date object:
- toDateString()
- toTimeString()
- toISOString()
- toLocaleString()
toDateString() method
We will start with the toDateString() method; The toDateString() method can be used to get the date in the following format:
[ Day Month Date Year ]
console.log(date);
console.log(date.toDateString());
This method is used to get only the date part from the whole date string.
toTimeString() method
The toTimeString() method is used to get the time from the date string. It outputs the time in the following format:
[ Hours:Minutes:Seconds Time Zone (Time Zone Name) ]
console.log(date);
console.log(date.toTimeString());
toISOString() method
This method is used to get the date in ISO format. This format gives the date in the zero UTC time zone.
console.log(date);
console.log(date.toISOString());
toLocaleString() method
This method formats the date in a localized string format. This function takes a language and a country in standard locale code format, i.e., ‘en-US’ as a parameter, and formats the date according to the desired (specified) locale.
console.log(date);
console.log(date.toLocaleString('en-US'));
The “get” methods
We can use the getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), getSeconds() and getMilliseconds() methods to output the date in our required format.
The getFullYear() method can be used to get only the value of the year stored in the date object. Similarly, getMonth(), getDate(), getHours(), getMinutes(), getSeconds() and getMilliseconds() can be used to get the individual values of Month, Date, Hours, Minutes, Seconds and Milliseconds respectively.
We can combine any of these methods to get a date in our required format. In this example, we will format the date in the following way:
Date/Month/Year
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
m++;
console.log(d + "/" + m + "/" + y)
In the above example, we increment the variable that contains the current month’s value because the months start at 0 in JavaScript.
Conclusion
Date formatting is an essential skill for web developers as they need to represent the date in a particular format. Many developers do not use the built-in JavaScript methods to operate on the date object as they can be very confusing. Instead, they use third-party libraries to manipulate the date object.
In this write-up, we saw different methods which can be used to format the date object. All of these methods are present in JavaScript by default.
