Dates and times can be tricky in JavaScript. You always want to be sure you are doing it correctly. Luckily, because JavaScript has a built-in Date object, it makes working with dates and times much easier. In fact, there are many different methods on the Date object that can be used to do different things with dates. In this blog, I’ll run through a few of these methods.
A quick note on the Date object
The built-in Date object in JavaScript offers us a set of APIs for working with date and time data. A Date object instance represents a single point in time. The instance is in a platform-independent format.
Creating an instance
Current Date / Time
There are multiple ways you can get an instance (or representation) of the current date and time.
Using the constructor
let now;
now = new Date();
console.log(now); // [object Date] { ... }
Using the Date() function
This returns a string representation of the current date and time
now = Date();
console.log(now);
// "Mon Nov 21 2022 10:39:45 GMT+0200 (South Africa Standard Time)"
Using a static method, .now()
This returns a number that represents the milliseconds elasped since 1 January 1970 UTC
now = Date.now();
console.log(now);
// 1669019985182
Other ways to create an instance
Parsing strings
With the new Date() constructor (or Date.parse() ). Strings must be compliant with the ISO 8601 format, YYYY-MM-DDTHH:mm:ss.sssZ.
const nextBirthday= new Date('2023-08-02T00:00:00')
The example below is discouraged and may not work in all runtimes/browsers. A library like moment or dayjs can help if other string formats are needed.
const nextBirthday = new Date('August 02, 2023 00:00:00');
// DISCOURAGED: may not work in all runtimes
Passing integers in the constructor
This syntax is new Date(year, month, day, hours, minutes, seconds, milliseconds);
This month is 0-indexed, meaning 0 is January and 11 is December
nextBirthday = new Date(2023, 7, 2, 0, 0, 0);
console.log(nextBirthday .toString());
// "Wed Aug 02 2023 00:00:00 GMT+0200 (South Africa Standard Time)"
Epoch (Unix) Timestamp
Epoch timestamp is the number of seconds elapsed since January 1, 1970 (midnight UTC/GMT)
Sytanx new Date(milliseconds)
nextBirthday = new Date(1690927200000)
Get Epoch in seconds
const seconds = Math.floor(Date.now() / 1000);
Date methods
We can also manage and manipulate dates and times using the methods provided by the Date object.
Accessing Date components
Get the year (4 digits, e.g., 2022)
nextBirthday.getFullYear()
// 2023
Get the month. The month is zero-indexed (i.e., 0 – 11).
nextBirthday.getMonth()
// 7
Get the day of the month, from 1 to 31.
nextBirthday.getDate()
// 2
Get the day of the week. This is also zero-index (i.e., from 0 to 6). The first day is always Sunday, 0 and last day is Saturday, 6. (Not so in some countries but can’t be changed).
nextBirthday.getDay();
// 2
The methods, getHours(), getMinutes(), getSeconds() , getMilliseconds() get the corresponding time components.
All the methods above return the components relative to your local time zone. UTC-counterparts are available for each method which return values relative to UTC. Simply insert UTC right after get in the method name.
// Local time is UTC +2
nextBirthday.getHours(); // 0
nextBirthday.getUTCHours(); // 22
Destructuring assignment example
const date = new Date();
const [month, day, year] = [date.getMonth(), date.getDate(), date.getFullYear()];
const [hour, minutes, seconds] = [date.getHours(), date.getMinutes(), date.getSeconds()];
Setting Date Components
The following methods allow to set date/time components
setFullYear(year, [month], [date])setMonth(month, [date])setDate(date)setHours(hour, [min], [sec], [ms])setMinutes(min, [sec], [ms])setSeconds(sec, [ms])setMilliseconds(ms)-
setTime(milliseconds)(sets the whole date by milliseconds since 01.01.1970 UTC)
let now = new Date();
now.setHours(12);
now.setFullYear(2015);
console.log(now.toString());
// "Sat Nov 21 2015 12:08:53 GMT+0200 (South Africa Standard Time)"
Every one of them except setTime() has a UTC-variant
let now = new Date();
now.setUTCHours(2);
Some methods can set multiple components at once. For example, setHours() gives you the option to set minutes, seconds and milliseconds as well. These options are not modified if not included in the method call.
let today = new Date();
today.setHours(12);
console.log(now.toString());
// "Mon Nov 21 2022 12:13:36 GMT+0200 (South Africa Standard Time)"
now.setHours(12, 12, 12, 12);
console.log(now.toString());
// "Mon Nov 21 2022 12:12:12 GMT+0200 (South Africa Standard Time)"
Formatting
Variations of the toString() method. Returns various string representation of a Date instance.
let now = new Date();
now.toString();
// "Mon Nov 21 2022 14:17:21 GMT+0200 (South Africa Standard Time)"
now.toDateString();
// "Mon Nov 21 2022"
now.toTimeString();
// "14:17:21 GMT+0200 (South Africa Standard Time)"
now.toISOString();
// "2022-11-21T12:17:21.595Z"
now.toUTCString();
// "Mon, 21 Nov 2022 12:17:21 GMT"
now.toLocaleString();
// "11/21/2022, 2:17:21 PM"
now.toLocaleDateString();
// "11/21/2022"
now.toLocaleTimeString();
// "2:17:21 PM"
now.toJSON();
// "2022-11-21T12:17:21.595Z"
The Intl.DateTimeFormat object
On modern browsers and runtimes, JavaScript includes an Internationalization API that allows for language-sensitive date and time formatting. You can start using it right away without having to import a massive date formatting library.
const now = new Date();
const formatted1 = Intl.DateTimeFormat('en-ZM').format(now);
const formatted2 = Intl.DateTimeFormat('en-ZM', { dateStyle: "full" }).format(now);
const formatted3 = Intl.DateTimeFormat('en-ZM', { dateStyle: "long" }).format(now);
const formatted4 = Intl.DateTimeFormat('en-ZM', { dateStyle: "medium" }).format(now);
const formatted5 = Intl.DateTimeFormat('en-ZM', { dateStyle: "short" }).format(now);
console.log(now); // [object Date] ...
console.log(formatted1); // "21/11/2022"
console.log(formatted2); // "Monday, November 21, 2022"
console.log(formatted3); // "21 November 2022"
console.log(formatted4); // "21 Nov 2022"
console.log(formatted5); // "21/11/2022"
Conclusion
In today’s blog post, we learned how to format date/time data in JavaScript. There are many libraries that handle this for us already, but if you’re working in a legacy codebase or have performance reasons for wanting to avoid a library, you may have to handle date/time formatting natively.
Learn more about the Date object on MDN references docs
