JavaScript Date/Time Technical Reference Guide

These methods allow you to extract a particular part of the date. Note that these have an equivalet “set” methods that allows you to set a single part of a date / time.

let now = new Date("Jan 21, 2024 13:00:59")

Note: the sample code below applies the methods to a variable now as an example, so you must have this variable defined as above first, before trying any of these code samples. In your own script, it may also not necessarily be a date object that represents ”now” — these methods can apply to any Date object you construct.

These methods help you convert the date into a “string” data type, or a text format for displaying on the page. It can be combined with localization options in the section below. There 2 approaches to formatting dates: a) Using style shortcuts and b) Using explicit format instructions for each slice of time

let now = new Date("Jan 21, 2024 13:00:59")

A) When using shortcuts, you can remove either dateStyle or timeStyle keys in the options to only display a time or a date. The table below shows outputs for the same style shortcut applied to both date and time, but you can mix-and-match them as needed.

b) For more granular control of the format, you can specify options for each part of the Date/Time as follows. Note, you cannot use both a style shortcut as above and these granular options at the same time.

now.toLocaleDateString("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "numeric",
  minute: "numeric",
  second: "numeric"
});

The table below illustrates how each date field might get formatted according to the style option provided. Empty cells indicate that the keyword is not a valid option for that date/time key.

** Note: These formatting keywords work in conjunction with the locale setting. The results above are from using the en-US (US English) setting. Using a different language/country locale will result in different outputs above.

These methods help you convert the date into formats specific to certain languages and countries, along with its timezone.
let now = new Date("Jan 21, 2024 13:00:59")

** Note: Using now.toLocaleString() without a locale (en-US) but with a timeZone option produces unexpected results. Always specify the locale if not using your local timezone. You can refer to this table for possible combinations of ISO language and country codes, with more details on the locales parameter on MDN. See list of timezones to see possible values for timeZone.

With Vanilla JavaScript, you can manipulate dates — get a time or day before and after a given date — through simple mathemetical subtraction or addition on the “epoch” millisecond representation of date.

1. We convert the given date to ms via the .getTime() method.
2. We calculate the ms of the duration we want to add/subtract. i.e. for xx hours, multiply xx by 60(min)*60(sec)*1000(ms), or for yy days, multiply yy by 24(hours)*60(min)*60(sec)*1000(ms).⁶
3. We perform the operation — adding to get future times, subtracting to get past time.
4. The result will be a numerical value in ms. In order to convert this back into a date, you will need to use the Date constructor on the value zz, using new Date(zz)

Example:
let date1 = new Date("Jan 01, 2024 13:00:30")
let date2 = new Date("Jan 02, 2024 14:30:50")