DEV Community

Cover image for JavaScript Date Object
Bello Osagie
Bello Osagie

Posted on • Edited on

JavaScript Date Object

#webdev #javascript #tutorial #node

host.png

JavaScript is an object-oriented language; everything is an object, including data that aren't, can be modeled as objects.

The general syntax is:

obj = new Object([...]) // instantiation
Enter fullscreen mode Exit fullscreen mode

[...] = optional parameters

Instantiation is the process of creating a new object.

Objects can be a String Date Audio Array, etc.

See the examples below:

const strObj = new String("Bello");
console.log(strObj, typeof strObj); // [String: 'Bello'] object

const arrObj = new Array(27, "Bello", true, 7n)
console.log(arrObj, typeof arrObj); // [ 27, 'Bello', true, 7n ] object

const dateObj = new Date();
console.log(dateObj, typeof dateObj); 
// year-month-dayThours:minutes.millisecondsz object

/* 
const audioObj = new Audio(url);
console.log(audioObj, typeof audioObj); 
*/
Enter fullscreen mode Exit fullscreen mode

In this article, the Date object will be the case study.

Creating new Date Objects

new Date() constructor is used to create a date object.

Syntax:

dateObj = new Date([...])
Enter fullscreen mode Exit fullscreen mode

where [... ] = optional arguments

The syntax above is in 4 ways:

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)
Enter fullscreen mode Exit fullscreen mode

new Date()

The object, new Date() represents the current date and time.

const dateObj = new Date();
dateObj; // year-month-dayThours:minutes.millisecondsz
Enter fullscreen mode Exit fullscreen mode

To convert the above date to milliseconds (since 1 January 1970), the getTime() method is needed.

const dateObj = new Date();
const toMsecs = dateObj.getTime();

console.log(`The current time in Milliseconds is ${toMsecs}ms`);
Enter fullscreen mode Exit fullscreen mode

The example above is the same as below:

const dateObj = new Date();

console.log(`The current time in Milliseconds is ${+dateObj}ms`);
Enter fullscreen mode Exit fullscreen mode

More on get methods in the next article

The date format above is in ISO standard format.

Where T = Time; Z = UTC

The object is a static date object. To make the object tick (dynamic), Web APIs (Application Programming Interface) are needed.

To get the date in milliseconds from the beginning of the current year use Date.now().

const toMsec = Date.now();
console.log(toMsec);
Enter fullscreen mode Exit fullscreen mode

image.png

new Date(year, month, ...)

Date and time specification has the syntax below:

date = new Date(year, month, day, hours, minutes, seconds, milliseconds)
Enter fullscreen mode Exit fullscreen mode

See the example below:

const dateObj = new Date(2057, 11, 03, 13, 34, 41, 992);
dateObj; // year-month-dayThours:minutes.millisecondsz
Enter fullscreen mode Exit fullscreen mode

image.png

Months are counted from 0 to 11. January is 0. December is 11.

The minimum number of arguments is 2, the month is required.

The order of the arguments is compulsory.

const dateObj1 = new Date(2057, 11);
// const dateObj1 = new Date(2057-11);
// const dateObj1 = new Date(2057/11);
// const dateObj1 = new Date("2057 Nov");
dateObj1;

const dateObj2 = new Date(2057, 11, 3);
// const dateObj2 = new Date(2057-11-3);
// const dateObj2 = new Date(2057/11/3);
// const dateObj2 = new Date("2057 Nov 3");
dateObj2;

const dateObj3 = new Date(2057, 11, 3, 13);
// const dateObj3 = new Date("2057 Jan 3 13:00:00");
// const dateObj3 = new Date("2057 Jan 3 13:00:00.000");
dateObj3;
Enter fullscreen mode Exit fullscreen mode

If the date object is single, the output is 1970-01-01T00:00:02.057Z

const dateObj = new Date(2057);
dateObj; // 1970-01-01T00:00:02.057Z
Enter fullscreen mode Exit fullscreen mode

JavaScript interprets the single argument, 2057 as 02 in seconds, 057 in milliseconds since January 01, 1970.

new Date(milliseconds)

new Date(milliseconds) creates a new date object as zero time plus milliseconds.

See the example below:

const prevCentury = new Date(0);
prevCentury; // 1970-01-01T00:00:00.000Z
Enter fullscreen mode Exit fullscreen mode

The time (T) 1970-01-01 is equivalent to January 01, 1970 00:00:00

One day (24 hours) is 86,400,000 milliseconds.

const dateObj = new Date(86_400_000);
dateObj; // 1970-01-02T00:00:00.000Z
Enter fullscreen mode Exit fullscreen mode

new Date(dateString)

new Date(dateString) creates a new date object from a date string:

const prevCentury = new Date("January 01, 1970 00:00:00");
// const prevCentury = new Date("1970 January 01 00:00:00");
prevCentury; // 1970-01-01T00:00:00.000Z

const nextCentury = new Date("November 03, 2077 12:59:10.453");
// const nextCentury = new Date("2077 November 03 12:59:10.453");
nextCentury; // 2077-11-03T12:59:10.453Z
Enter fullscreen mode Exit fullscreen mode

The comma , in the example above is optional but more readable

Dates Conversion

In the table below, let const d = new Date()

See the date conversion table below:

Methods Conversions Examples
toString converts to a string d.toString()
toUTCString converts to a UTC string d.toUTCString()
toDateString converts to a more readable format d.toDateString()
toISOString converts to a string, using the ISO standard format d.toISOString()
toJSON converts to JSON format d.toJSON()
toLocaleDateString converts using local conventions d.toLocaleDateString()
toLocaleTimeString converts using local conventions d.toLocaleTimeString()
toLocaleString converts using local conventions d.toLocaleString()
toTimeString converts to string d.toTimeString()

Check out the complete list of methods on MDN

Happy coding!!!

image.png

Learn on Skillshare

Top comments (0)

Read next

hamzakhan profile image

🚀 The Rise of Bun.js: Why It’s More Than Just Another JavaScript Runtime 🥖

Hamza Khan -

araldhafeeri profile image

Designing and Implementing Ant Design Global App Tour for React Apps.

Ahmed Rakan -

dsychin profile image

Lessons Learned Migrating from React CRA & Jest to Vite & Vitest

Desmond Chin -

prince_beec5ccde00b7c6c73 profile image

👻 Scary Ghost Cursor with Smoke Trail! 💀 code using html5,css3 and javascript

Prince -