All That You Need To Know About Date Object In JavaScript
Tags: javascript, beginners, webdev, codenewbie
Published: 2021-05-17 05:00:40

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.  

```javascript
new Date();
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
```

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.

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

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.

```javascript
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.
```javascript
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 (1 to 31). 
```javascript
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(0 to 6), 0 represents Sunday, it cannot be changed..
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
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.
```javascript
let now = new Date();
// Current Time: Fri May 14 2021 20:29:55 GMT+0530
console.log(now.getMilliseconds());     // 251
```

```javascript
// 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.
```javascript
//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])`
```javascript
//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])`
```javascript
//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])`
```javascript
//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])`
```javascript
//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.
```javascript
// 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.
```javascript
// 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.

```javascript
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. 

```javascript
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
```

{% link https://dev.to/kiranrajvjd/24-html-tags-you-may-not-know-37be %}
{% link https://dev.to/kiranrajvjd/10-best-javascript-based-github-repos-for-web-developers-49pc %}
{% link https://dev.to/kiranrajvjd/the-ultimate-web-developer-resources-list-200-resources-2gf5 %}
{% link https://dev.to/kiranrajvjd/75-awesome-web-resources-that-make-web-development-easy-2pff %}