All That You Need To Know About Date And Time 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. We cannot provide these values each time to our programs like variables we need to pro…


This content originally appeared on DEV Community and was authored by Kiran Raj R

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. We cannot provide these values each time to our programs like variables we need to provide it from system where the program is running or from some other resources. The manipulations can be complex as the date/time may contain integer, string and/or symbols in the values, we need complex code to work on the date/time values which will be time consuming and make our code more complex and long.

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 to get the time and date part from the object.

To get the current date and time we can call the Date constructor without any arguments, the output will be a string representation and we cannot use Date object methods on it. The output will contain current date, time and time zone information in string format. Remember we cannot use Date object methods on strings, the method only work on the Date object type only. To create Date object use the new keyword.

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

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

2.getDate() : Returns a integer representing the date (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.getDate());             // 14

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

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

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

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

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

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

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

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
// 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

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)

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)

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)

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)

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)

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)

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)

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)

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


This content originally appeared on DEV Community and was authored by Kiran Raj R


Print Share Comment Cite Upload Translate Updates
APA

Kiran Raj R | Sciencx (2021-05-17T05:00:40+00:00) All That You Need To Know About Date And Time In JavaScript. Retrieved from https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/

MLA
" » All That You Need To Know About Date And Time In JavaScript." Kiran Raj R | Sciencx - Monday May 17, 2021, https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/
HARVARD
Kiran Raj R | Sciencx Monday May 17, 2021 » All That You Need To Know About Date And Time In JavaScript., viewed ,<https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/>
VANCOUVER
Kiran Raj R | Sciencx - » All That You Need To Know About Date And Time In JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/
CHICAGO
" » All That You Need To Know About Date And Time In JavaScript." Kiran Raj R | Sciencx - Accessed . https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/
IEEE
" » All That You Need To Know About Date And Time In JavaScript." Kiran Raj R | Sciencx [Online]. Available: https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/. [Accessed: ]
rf:citation
» All That You Need To Know About Date And Time In JavaScript | Kiran Raj R | Sciencx | https://www.scien.cx/2021/05/17/all-that-you-need-to-know-about-date-and-time-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.