DEV Community

Cover image for All That You Need To Know About Date Object In JavaScript
Kiran Raj R
Kiran Raj R

Posted on • Edited on

All That You Need To Know About Date Object In JavaScript

In web development there will be many instance in which we need to interact with date/time values, we may need to do various operations on the dates and time values, like time elapsed since a post was published, the time in which a message was delivered etc. We cannot provide values for time/date constantly to the program like we provide values to a variable, we need a mechanism that will keep track of the time/date changes. JavaScript has Date Object which help us in tracking the time/date and methods to interact with date and time values. Date objects are based on the number of milliseconds elapsed since 1st January 1970 UTC.

In JavaScript the date/time is not a string, it is represented as object, Date object, there is no separate data type for time and date, both time and date are represented using Date object. Date object have some built-in methods which help to extract the time and date part from the Date object.

new Date();
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
Enter fullscreen mode Exit fullscreen mode

To get the current date and time we can call the Date function without any arguments, the output will be a string representation of the current date, time (time in which the constructor was called) and time zone, since the output is in string format, we cannot use Date object methods on it.

As I told you Date object is based on the value of milliseconds elapsed since 1st January 1970, if we pass 0(milliseconds) as argument to the Date constructor, we will get "1st January 1970" as output. The output here is in "GMT+0530" time zone as it was my browser default.

let time1 = new Date(0);
console.log(time1); // Thu Jan 01 1970 05:30:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

You can use Date.now() to get the number of milliseconds between 1st January 1970 and the time in which the now() method was called.

Find the difference between Date() and new Date() below.

let now = new Date();
console.log(now);                 
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time)   
console.log(typeof now);           // object 
console.log(now.getMonth());       // 4

let strnow = Date();
console.log(strnow);
// Current Time: Fri May 14 2021 20:29:55 GMT+0530 (India Standard Time) 
console.log(typeof strnow);        //string

console.log(strnow.getMonth());
//Uncaught TypeError: strnow.getMonth is not a function
Enter fullscreen mode Exit fullscreen mode

The Date object provides methods to get date/time values and set date/time values, those methods are explained below.

Getter Methods of Date()

Getter methods are used to get specific data from the Date Object. Some of the major getter functions are mentioned here.

1.getTimezoneOffset() : Returns the current local time zone, the local time zone is represented in +/- change in minutes.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getTimezoneOffset());   // -330
Enter fullscreen mode Exit fullscreen mode

2.getDate() : Returns a integer representing the date (1 to 31).

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDate());             // 14
Enter fullscreen mode Exit fullscreen mode

3.getDay() : Returns the day of the week for the local time(0 to 6), 0 represents Sunday, it cannot be changed..

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getDay());              // 5
Enter fullscreen mode Exit fullscreen mode

4.getMonth() : Returns the integer representing the month in the local time, month starts from 0 to 11.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMonth());            // 4
Enter fullscreen mode Exit fullscreen mode

5.getFullYear() : Returns the year of the local date, year is represented in 4 digits.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021
Enter fullscreen mode Exit fullscreen mode

6.getHours() : Returns the current hour of local time.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getHours());            // 20
Enter fullscreen mode Exit fullscreen mode

7.getMinutes() : Returns the current minutes of the local time.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMinutes());          // 29
Enter fullscreen mode Exit fullscreen mode

8.getSeconds() : Returns the current seconds of local time.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getSeconds());          // 44
Enter fullscreen mode Exit fullscreen mode

9.getMilliseconds() : Returns the milliseconds of the local time.

let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMilliseconds());     // 251
Enter fullscreen mode Exit fullscreen mode
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getFullYear());         // 2021
console.log(now.getMonth());            // 4
console.log(now.getDate());             // 14
console.log(now.getHours());            // 20
console.log(now.getMinutes());          // 29
console.log(now.getSeconds());          // 44
console.log(now.getMilliseconds());     // 251
console.log(now.getDay());              // 5
console.log(now.getTimezoneOffset());   // -330
Enter fullscreen mode Exit fullscreen mode

All the above methods is based on the local time, you can use the UTC variant of the methods to work with UTC based time. Just add UTC after the get, like getUTCDate(), getUTCDay etc.

Setter methods of Date()

1.setDate() : Sets the day of the month.

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now.setDate(20)
console.log(now);
// Thu May 20 2021 21:28:29 GMT+0530 (India Standard Time)

Enter fullscreen mode Exit fullscreen mode

2.setMonth() : Sets the month. You can specify both month and date.
setMonth(month, [date])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)       
now = new Date();
now.setMonth(11);
console.log(now);
// Tue Dec 14 2021 21:29:51 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

3.setFullYear() : Sets the year. You can specify date, month and year, date and month are optional.
setFullYear(year, [month], [date])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setFullYear(2025);
console.log(now);
// Wed May 14 2025 21:30:20 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

4.setHours() : Sets the hours. You can specify optional minutes, seconds and milliseconds along with hour. setHours(hour, [min], [sec], [ms])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setHours(23);
console.log(now);
// Fri May 14 2021 23:31:59 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

5.setMinutes() : Sets the minutes. You can specify seconds and millisecond as optional parameters.
setMinutes(min, [sec], [ms])

//Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMinutes(00);
console.log(now);
// Fri May 14 2021 21:00:58 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

6.setSeconds() : Sets the seconds. You can also specify millisecond as optional parameter.

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setSeconds(00);
console.log(now);
// Fri May 14 2021 21:33:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

7.setMilliseconds() : Sets the milliseconds.

// Current Time:  Fri May 14 2021 21:28:29 GMT+0530 (India Standard Time)
now = new Date();
now.setMilliseconds(00);
console.log(now);
// Fri May 14 2021 21:34:32 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

You can convert the string into Date object, the Date object's constructor take the string in different formats. Some examples are given below.

const date1 = new Date("Fri, May 14 2021 21:00:00");
console.log(date1);
//Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date2 = new Date("Fri, May 14 2021 21:00:00 UTC");
console.log(date2);
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)
// the output is in Indian standard time not in UTC, 
// i.e. 5:30 is added to 21:00
// so we get 02:30

const date3 = new Date("14 May 2021 21:00:00 UTC+05:30"); 
console.log(date3);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)

const date4 = new Date(2021, 4, 14, 21, 00, 0);
console.log(date4);
// Fri May 14 2021 21:00:00 GMT+0530 (India Standard Time)
// Rememnber month starts from zero

const date5 = new Date("2021-05-14T21:00:00Z");
console.log(date5)
// Sat May 15 2021 02:30:00 GMT+0530 (India Standard Time)
Enter fullscreen mode Exit fullscreen mode

The output of the Date object is object, we can convert it into string format, the Date object have built-in methods for that.

  1. toString() : Returns the string representation of the Date object.
  2. toLocalString() : Returns the string representation of the Date object in local format.
  3. toTimeString() : Returns the time part of the Date object.
  4. toLocalTimeString() : Returns the time part of the Date object in the local format.
  5. toDateString() : Returns the date part of the Date object.
  6. toLocalDateString() : Returns the date part of the Date object in the local format.
console.log(typeof now.toString(), now.toString());
// string Fri May 14 2021 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleString());
// 5/14/2021, 9:48:19 PM

console.log(now.toDateString());
// Fri May 14 2021

console.log(now.toLocaleDateString());
// 5/14/2021

console.log(now.toTimeString());
// 21:48:19 GMT+0530 (India Standard Time)

console.log(now.toLocaleTimeString());
// 9:48:19 PM
Enter fullscreen mode Exit fullscreen mode

Top comments (6)

Collapse
 
btlm profile image
btlm

Probably you have switched descriptions for getDate() and getDay()

2.getDate() : Returns a integer representing the date (0 to 6), 0 represents Sunday, it cannot be changed.

3.getDay() : Returns the day of the week for the local time(1 to 31).

getDate() returns 1 to 31 (day of month) and getDay() returns 0 to 6 (day of week) (switched values in your descr)

Anyways great article, thank you :)

Collapse
 
kiranrajvjd profile image
Kiran Raj R

rectified, thank you

Collapse
 
piaomu profile image
Kasey Wahl

"In JavaScript the date/time is not a string, it is represented as object, Date object, there is no separate data type for time and date, both time and date are represented using Date object."

THIS!!!

When I first started JavaScript, I didn't internalize this distinction (probably because I wasn't focusing on the object-oriented side of JS) and it led to a LOT of frustration until I got a better understanding of how objects work.

What a great, comprehensive explainer!

Collapse
 
kiranrajvjd profile image
Kiran Raj R

I just share what I know.. happy to know it is useful... Thank you...

Collapse
 
prabhukadode profile image
Prabhu

Very useful

Collapse
 
kiranrajvjd profile image
Kiran Raj R

Thank you