Javascript Date and Time

Date and time in Javascript¶

• The Date object is used to work with dates and times.
• You create an instance of the Date object with the "new" keyword.

Timezones¶

There are hundreds of timezones in our world. In JavaScript, we only care about two—Local Time and Coordinated Universal Time (UTC).

• Local time refers to the timezone your computer is in.
• UTC is synonymous with Greenwich Mean Time (GMT) in practice.

By default, almost every date method in JavaScript (except one) gives you a date/time in local time. You only get UTC if you specify UTC.

With this, we can talk about creating dates.

Creating a date¶

You can create a date with new Date(). There are four possible ways to use new Date():

1. With a date-string
2. With date arguments
3. With a timestamp
4. With no arguments

date-string method¶

• In the date-string method, you create a date by passing a date-string into new Date.
• The Date format is YYYY-MM-DDTHH:mm:ss.sssZ

• Here’s what the values mean:

  • YYYY: 4-digit year
  • MM: 2-digit month (where January is 01 and December is 12)
  • DD: 2-digit date (0 to 31)
  • -: Date delimiters
  • T: Indicates the start of time
  • HH: 24-digit hour (0 to 23)
  • mm: Minutes (0 to 59)
  • ss: Seconds (0 to 59)
  • sss: Milliseconds (0 to 999)
  • :: Time delimiters
  • Z: If Z is present, date will be set to UTC. If Z is not present, it’ll be Local Time. (This only applies if time is provided.)

let date = new Date('2021-03-21T14:23:54.234Z')
console.log(date)
// Sun Mar 21 2021 19:53:54 GMT+0530 (India Standard Time)

Creating dates with arguments¶

we can pass in up to seven arguments to create a date/time.

1. Year: 4-digit year.
2. Month: Month of the year (0-11). Month is zero-indexed. Defaults to 0 if omitted.
3. Day: Day of the month (1-31). Defaults to 1 if omitted.
4. Hour: Hour of the day (0-23). Defaults to 0 if omitted.
5. Minutes: Minutes (0-59). Defaults to 0 if omitted.
6. Seconds: Seconds (0-59). Defaults to 0 if omitted.
7. Milliseconds: Milliseconds (0-999). Defaults to 0 if omitted.

// 11th June 2019, 5:23:59am, Local Time
let date = new Date(2019, 5, 11, 5, 23, 59)
console.log(date);

Creating UTC time¶

We can create a UTC time like below

let date = new Date(Date.UTC(2019, 5, 11))
console.log(date);
// Tue Jun 11 2019 05:30:00 GMT+0530 (India Standard Time)

Creating dates with timestamps¶

In JavaScript, a timestamp is the amount of milliseconds elapsed since 1 January 1970 (1 January 1970 is also known as Unix epoch time).

let timestamp_in_milliseconds = 1560211200000;
let date = new Date(timestamp_in_milliseconds);
console.log(date);
// Tue Jun 11 2019 05:30:00 GMT+0530 (India Standard Time)

Date with no arguments¶

If we create a date without any arguments, we get a date set to the current time (in Local Time).

let date = new Date();
console.log(date);
// Sat May 29 2021 13:33:33 GMT+0530 (India Standard Time)

Formatting a date¶

We can get the string representation of Date object with date formatting methods.

Default string formatting methods - toString - toDateString - toLocaleString - toLocaleDateString - toGMTString - toUTCString - toISOString

const date = new Date(2021, 0, 23, 17, 23, 42);
console.log(date.toString())
// Sat Jan 23 2021 17:23:42 GMT+0530 (India Standard Time)
console.log(date.toDateString())
// Sat Jan 23 2021
console.log(date.toLocaleString())
// 1/23/2021, 5:23:42 PM
console.log(date.toLocaleDateString())
// 1/23/2021
console.log(date.toGMTString())
// Sat, 23 Jan 2021 11:53:42 GMT
console.log(date.toUTCString())
// Sat, 23 Jan 2021 11:53:42 GMT
console.log(date.toISOString())
// 2021-01-23T11:53:42.000Z

Writing a custom date formatter¶

Let’s say we want something like 23 January 2021. To create this value, we need to know the date methods that comes with the Date object.

To get dates, we can use these four methods:

• getFullYear: Gets 4-digit year according to local time
• getMonth: Gets month of the year (0-11) according to local time. Month is zero-indexed.
• getDate: Gets day of the month (1-31) according to local time.
• getDay: Gets day of the week (0-6) according to local time. Day of the week begins with Sunday (0) and ends with Saturday (6).

const d = new Date(2021, 0, 23)
const year = d.getFullYear() // 2021
const date = d.getDate() // 23
const month = d.getMonth() // 0

const monthsArr = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

const formatted = date + " " + monthsArr[month] + " " + year;
console.log(formatted)
// 23 January 2021

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date