So I picked the most frequently used methods and put them into this cheat sheet to make your life easier.
- An Overview
- Cheat Sheet
- Common Use Cases
When working with dates and times, you'll most likely want to perform addtions/subtractions on your date or time values, transform a value from one type, e.g. number to another, e.g. string, format your date and time strings and so on.
For example, let's say we want a string representation of the time 15 minutes from now. We follow these steps to get the result:
- Get the number of milliseconds (
nowMs) for now.
- Add 15 * 60 * 1000 to
fifteenMinutesLaterMsto a time string.
- Optionally format the time string.
We'll look at this example in more detail later, but as you can see, at the core of solving such problems is understanding what data types you need to perform what operations and which methods help you achieve that.
Here is a list of the methods I find I'm using most of the time. Please note that,
- All methods, except the constructors
Date()and static method
Date.now(), are instance methods of a Date object.
- Number of milliseconds refers to the number of milliseconds between January 1, 1970, 00:00:00 UTC and your specified date.
- To find out more about the methods, check out MDN docs on Date.
- new Date()
Params: date object/date string/milliseconds/year, month/year, month, day/year, month, day, hours/...
Params: number of milliseconds
Params: hours/hours, minutes/hours, minutes, seconds/hours, minutes, seconds, milliseconds
Params: minutes/minutes, seconds/minutes, seconds, milliseconds
Note: For information on other setSometing() methods, check out MDN docs on Date.
Returning both date and time in a single string
- Date() (same as
Returning date string
Returning time string
Now, let's look at some common use cases of these methods. Please note the values used in the examples below are subject to my timezone and the time the date objects were instantiated, so your values will most likely be different.
1670454321367 → 2022-12-07T23:05:21.367Z
const date = new Date(1670454321367)
'2022-12-07' → 2022-12-07T00:00:00.000Z
'2022-12-07T00:00' → 2022-12-06T15:00:00.000Z
const date1 = new Date('2022-12-07') const date2 = new Date('2022-12-07T00:00')
Note: Although the two strings passed to Date constructor seem to refer to the same date, two different dates were returned in the example. This is because Date-only strings are treated as UTC, while date-time strings are treated as local.
2022, 11, 7 → 2022-12-06T15:00:00.000Z
const date = new Date(2022, 11, 7)
Note: Remember month is 0-based and the passed year, month and day numbers are treated as local.
Example1: current date time
current date time → 1670454321367
const ms = Date.now()
Example2: specified date time
2022-12-07T21:00 → 1670414400000
const ms = new Date('2022-12-07T21:00').getTime() // OR const ms = new Date('2022-12-07').setHours(21, 0, 0)
Example3: specified time of today
21:00 of today → 1670414400000
const ms = new Date().setHours(21, 0, 0)
Wed Dec 07 2022 21:33:20 → 'Wed Dec 07 2022 21:33:20 GMT+0900 (日本標準時)'
const str = Date() // OR const str = new Date().toString()
Wed Dec 07 2022 21:33:20 → '2022/12/7 21:33:20'
const str = new Date().toLocaleString()
Wed Dec 07 2022 21:33:20 → 'Wed Dec 07 2022'
const str = new Date().toDateString()
Wed Dec 07 2022 21:33:20 → '2022/12/7'
const str = new Date().toLocaleDateString()
Wed Dec 07 2022 21:33:20 → '21:33:20 GMT+0900 (日本標準時)'
const str = new Date().toTimeString()
Wed Dec 07 2022 21:33:20 → '21:33:20'
const str = new Date().toLocaleTimeString()
'21:00' of today → 1670414400000 (your output will be different)
const [h, m] = '21:00'.split(':') const ms = new Date().setHours(h, m, 0)
1670414400000 → '21:00'
const ms = new Date(1670414400000).toLocaleTimeString().slice(0, -3)
Note: For single-digit hours, say 8,
08:00:00. To get consistent results, I used
slice(0, -3) to just drop the last
'8:00' → '8:30'
const offsetMs = 30 * 60 * 1000 const timeBeforeMs = new Date().setHours(8, 0, 0) const timeAfterMs = timeBeforeMs + offsetMs const timeAfterString = new Date(timeAfterMs).toLocaleTimeString().slice(0, -3)
As I mentioned, it's important to understand what type of data you want and which methods help you get the correct type of data. And as a bonus tip, I highly recommend you NAME your variables in a way that explicitly conveys information about the type of data they hold. This means
myTimeMs is a better name for a variable holding a milliseconds value than
Finally, when you're not sure about any of the methods, do check out the great MDN docs on Date.