Date in Javascript

What is date in JS?

Date is a built-in object in JavaScript that stores the date and time. It provides a number of built-in methods for formatting and managing that data.

const now = new Date()
console.log(now) // Tue Jun 18 2024 19:18:11 GMT+0200 (Central European Summer Time)

Creating a Date object

There are four ways to create a new Date object:

1. new Date(): Creates a new Date object with the current date and time.
2. new Date(milliseconds): Creates a new Date object with the specified number of milliseconds since January 1, 1970.
3. new Date(dateString): Creates a new Date object with the specified date string.
4. new Date(year, month, day, hours, minutes, seconds, milliseconds): Creates a new Date object with the specified date and time.

const now = new Date() // current date and time
const epoch = new Date(0) // January 1, 1970
const dateString = new Date("2022-01-01") // January 1, 2022
const customDate = new Date(2022, 0, 1, 0, 0, 0, 0) // January 1, 2022

Getting the current date and time

You can get the current date and time using the Date object:

const now = new Date()
console.log(now) // Tue Jun 18 2024 19:18:11 GMT+0200 (Central European Summer Time)

Getting date and time components

You can get the individual components of a date and time using the following methods:

const now = new Date()
console.log(now.getDate()) // 18 (day of the month)
console.log(now.getDay()) // 2 (day of the week)
console.log(now.getFullYear()) // 2024 (year)
console.log(now.getHours()) // 19 (hour)
console.log(now.getMinutes()) // 18 (minutes)
console.log(now.getSeconds()) // 11 (seconds)
console.log(now.getMilliseconds()) // 0 (milliseconds)

Getting time difference

You can get the difference between two dates by subtracting them:

(async () => {
    const d1 = new Date()
    await new Promise(resolve => setTimeout(resolve, 1000))
    const d2 = new Date()
    console.log(d2 - d1) // 1002 (in milliseconds)
})()

Formatting to readable text

You can use the Intl.DateTimeFormat object to format a date to a readable text. Here's an example:

const datetimeToReadable = new Intl.DateTimeFormat("en-us", {
    hour: "numeric",
    dayPeriod: "short"
})
 
const today = new Date()
console.log(datetimeToReadable.format(today)) // "7 in the evening" if it's 7 PM

Specific time zone formatting

The Date object uses the local time zone of the user's computer. If you want to work with a specific time zone, you can use the Intl.DateTimeFormat object:

const datetimeToReadable = new Intl.DateTimeFormat("en-us", {
    hour: "numeric",
    dayPeriod: "short",
    timeZone: "Europe/Warsaw"
})
 
const today = new Date()
console.log(datetimeToReadable.format(today)) // "7 in the evening" if it's 7 PM in Warsaw

UTC time

The Date object uses the local time zone of the user's computer.

You can use the getUTC* methods to work with UTC time:

const now = new Date()
console.log(now.getUTCDate()) // 18 (day of the month)
console.log(now.getUTCDay()) // 2 (day of the week)
console.log(now.getUTCFullYear()) // 2024 (year)
console.log(now.getUTCHours()) // 17 (hour)
console.log(now.getUTCMinutes()) // 18 (minutes)
console.log(now.getUTCSeconds()) // 11 (seconds)
console.log(now.getUTCMilliseconds()) // 0 (milliseconds)

Libraries

There are a number of libraries that can help you work with dates in JavaScript, but there are two to be mentioned:

• date-fns (opens in a new tab): A modern JavaScript date utility library that provides a number of useful functions for working with dates.
• moment.js (opens in a new tab): An older but still amazing JavaScript date utility library that provides a number of useful functions for working with dates.

Conclusion

That's all. Start using dates with more confidence.

READ

Latest readings

• Readings are sites which will help you with detailed

• information about given topic. Read latest ones from Learn.