JavaScript Dates

JavaScript Dates

The date is particularly familiar in Javascript. It might be simple if you understand what to watch out for. We ensure you can expand your horizon about everything related to the Javascript Dates. Let’s get started with more useful information below.

Create a Javascript Date

Users might create a date through the leading ways below. 

Use date arguments

Here are the following arguments that you have to use: 

  • Year: It displays the 4-digit year
  • Month: from 0 to 11. The month is assigned as zero-indexed.
  • Day: from 1 to 31.
  • Hour: from 0 to 23.
  • Minutes: from 0 to 59. 
  • Seconds: from 0 to 59.
  • Milliseconds: from 0 to 999. 

Now, we will present illustrated examples to make you clear about it. 

var varDate = new Date(2022, 9, 23)
console.log(varDate ); // Sun Oct 23 2022 00:00:00 GMT+0700 (Indochina Time)

varDate = new Date(2022, 9, 23, 10)
console.log(varDate ); // Sun Oct 23 2022 10:00:00 GMT+0700 (Indochina Time)

varDate = new Date(2022, 9, 23, 10, 20)
console.log(varDate ); // Sun Oct 23 2022 10:20:00 GMT+0700 (Indochina Time)

varDate = new Date(2022, 9, 23, 10, 20, 40)
console.log(varDate ); // Sun Oct 23 2022 10:20:40 GMT+0700 (Indochina Time)

The results above will return to the local time. Besides, as for the case of UTC, users can do it like below. 

new Date(Date.UTC(2022, 9, 23))

Notes: 

There are double timezones in Javascript

  • Local time: display the timezone your personal computer is in.
  • UTC: involved in GMT (Greenwich Mean Time) 

Use without arguments

You need to get a date with the current time (local time) in case you want to use it without arguments. 

var varDate = new Date()
console.log(varDate);
// The result is: Fri Sep 23 2022 12:28:45 GMT+0700 (Indochina Time)

Use the Timestamps

A Timestamp is the milliseconds lasted since the first day in 1970. Here is a typical example that demonstrates this case. 

// Tue Jun 11 2019 07:00:00 GMT+0700 (Indochina Time)
new Date(1560211200000)

Use the dateString method

You can create a new date from the date string. Let’s see the example below. 

var varDate = new Date("September 23, 2022 20:15:03")
console.log(varDate);

The result is:

Fri Sep 23 2022 20:15:03 GMT+0700 (Indochina Time)

Format a Javascript Date

A Date object goes with typical formatting methods. One of them offers you a particular value

  • toString shows: Sun Jan 23, 2022, 17:25:45 GMT+0700
  • toDateString shows: Sun Jan 23, 2022
  • toLocaleString shows: 23/01/2022, 17:25:45
  • toLocaleDateString shows: 23/01/2022
  • toGMTString shows: Sun, 23 Jan 2022, 10:25:45 GMT
  • toUTCString shows: Sun, 23 Jan 2022, 10:25:45 GMT

Next, before customizing the format, you have to make it first. 

Custom date format

Suppose the case you have: Fri, 23 September 2022. You apply the date methods to create the value. To do it, you take the four methods below. 

  • getFullYear: It reflects the 4-digit year.
  • getMonth: the value is from 0 to 11. 
  • getDate: the value is from 1 to 31. 
  • getDay: the value is from 0 to 6. 

Let’s see the example below to know more.

const date = new Date(2022, 9, 23)
const year = date.getFullYear()
const d = date.getDate() 
console.log(year); // 2022
console.log(d); // 23

Next, you should create the object that presents the month’s value. 

const months = {
  0: 'Jan',
  1: 'Feb',
  2: 'Mar',
  3: 'Apr',
  4: 'May',
  5: 'Jun',
  6: 'Jul',
  7: 'Aug',
  8: 'Sep',
  9: 'Oct',
  10: 'Nov',
  11: 'Dec'
}

Then, use the array to generate similar outcomes.

const months = [
  'Jan',
  'Feb',
  'Mar',
  'Apr',
  'May',
  'Jun',
  'Jul',
  'Aug',
  'Sep',
  'Oct',
  'Nov',
  'Dec'
]

Implement getMonth to obtain the month from a date. 

const monthName = months[d.getMonth()]
console.log(monthName) // September

Similarly, you can get ‘Thu’ by using an array like the one below.

const days = [
  'Sun',
  'Mon',
  'Tue',
  'Wed',
  'Thu',
  'Fri',
  'Sat'
]

Next, you get dayName by using dayIndex.

const dayName = days[d.getDay()] // Fri

Finally, combine the variables above you made.

const formatted = `${dayName}, ${monthName} ${date} ${year}`
console.log(formatted) // Fri, September 23 2022

Compare Javascript Dates

The first thing you need to do is to compare dates with >, <, >=, and <=.

const now = new Date(2022, 9, 23)
const next = new Date(2022, 9, 24)
console.log(now < next) // true

Next, you could use getTime to check the timestamps when double dates drop simultaneously. 

const checkTime = (varDate1, varDate2) => {
  return varDate1.getTime() === varDate2.getTime()
}

const now = new Date(2022, 9, 23)
const today = new Date(2022, 9, 23)
console.log(checkTime(now, today)) // true

now_time = new Date(2022, 9, 23, 10)
today_time = new Date(2022, 9, 23, 10,30)
console.log(checkTime(now_time, today_time)) // fasle

Lastly, you could use the getDate, getMonth, and getFullYear if you need to know whether double dates drop on a similar day. 

const checkTime = (varDate1, varDate2) => {
  return varDate1.getFullYear() === varDate2.getFullYear() &&
         varDate1.getMonth() === varDate2.getMonth() &&
         varDate1.getDate() === varDate2.getDate()
}

const now = new Date(2022, 9, 23)
const today = new Date(2022, 9, 23)
console.log(checkTime(now, today)) // true

now_time = new Date(2022, 9, 23, 10)
today_time = new Date(2022, 9, 23, 10,30)
console.log(checkTime(now_time, today_time)) // true

Tutorials about dates in JS

See more other articles related to JS Date:

Summary

We believe you can find it useful to learn more about the Javascript Dates through this post. If you expect to know more about it, please feel free to contact us. Thank you for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *