Working with date and time in Javascript

Working with date and time in Javascript

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)
- The output may change based on your locale timezone

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);
- The output may change based on your locale timezone

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)
- The output may change based on your locale timezone

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)
- The output may change based on your locale timezone

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