# Date object

The Date object is a built-in object for working with dates and times
A Date object must be created through the new Date() constructor
The date/time is based on the browser settings, so the result depends on the timezone you're in!

# Constructor

There are four ways to instantiate a date:
- new Date(): the current date and time
- new Date(year, month, day, hours, minutes, seconds, ms): every property after year is optional
- new Date(ms): milliseconds after Jan 1 1970
- new Date(dateString)

example	result: d = ...
`let d = new Date();`	`Sun Apr 27 2025 05:26:58 GMT+0000 (Coordinated Universal Time)`
`let d = new Date(2020, 0, 31);`	`Fri Jan 31 2020 00:00:00 GMT+0000 (Coordinated Universal Time)`
`let d = new Date(0);`	`Thu Jan 01 1970 00:00:00 GMT+0000 (Coordinated Universal Time)`
`let d = new Date('October 16, 1964 11:13:00');`	`Fri Oct 16 1964 11:13:00 GMT+0000 (Coordinated Universal Time)`

REMARK

You need to reload this page to see actual dates in the "result" column of the tables on this page!

# Frequently used methods

# Get or set portions of a date

get	set	description
`getDay()` (opens new window)		get the day of the week from `0` (Sunday) to `6` (Saturday)
`getDate()` (opens new window)	`setDate()` (opens new window)	get/set the day of the month from `1` to `31`
`getMonth()` (opens new window)	`setMonth()` (opens new window)	get/set the month from `0` (Januari) to `11` (December)
`getFullYear()` (opens new window)	`setFullYear()` (opens new window)	get/set the year
`getHours()` (opens new window)	`setHours()` (opens new window)	get/set the hour from `0` to `23`
`getMinutes()` (opens new window)	`setMinutes()` (opens new window)	get/set the minutes from `0` to `59`
`getSeconds()` (opens new window)	`setSeconds()` (opens new window)	get/set the seconds from `0` to `59`
`getMilliseconds()` (opens new window)	`setMilliseconds()` (opens new window)	get/set the milliseconds from `0` to `999`

# Convert date to different formats

convert	result
`toString()` (opens new window)	`Sun Apr 27 2025 05:26:58 GMT+0000 (Coordinated Universal Time)`
`toLocaleString()` (opens new window)	`4/27/2025, 5:26:58 AM` (browser default format and timezone)
`toLocaleString('en-US', { timeZone: 'America/New_York' })`	`4/27/2025, 1:26:58 AM`
`toUTCString()` (opens new window)	`Sun, 27 Apr 2025 05:26:58 GMT`
`toISOString()` (opens new window)	`2025-04-27T05:26:58.243Z`
`toDateString()` (opens new window)	`Sun Apr 27 2025`
`toLocaleDateString()` (opens new window)	`4/27/2025` (browser default format and timezone)
`toLocaleDateString('en-US', { timeZone: 'America/New_York' })`	`4/27/2025`
`toTimeString()` (opens new window)	`05:26:58 GMT+0000 (Coordinated Universal Time)`
`toLocaleTimeString()` (opens new window)	`5:26:58 AM` (browser default format and timezone)
`toLocaleTimeString('en-US', { timeZone: 'America/New_York' })`	`1:26:58 AM`

TIP

It's not always that easy to parse, validate, manipulate and display dates and times in the way you want
There are several JavaScript libraries that can help you with this:
- Moment.js (opens new window): you see this library often in examples, but the project has retired on september 2020
- Luxon (opens new window): the successor of Moment.js but with a different API
- Day.js (opens new window): a fast (2 kB) replacement for Moment.js with the same API as Moment.js

# Examples

# Days before Christmas (native version)

Open es6/date/christmasNative.html and es6/date/christmasNative.js

<div class="border-green"></div>
 
        Copied!

// get the current date
const now = new Date();
// get next Christmas
const christmas = new Date(now.getFullYear(), 11, 25);
// set Christmas to next year if the current date is after Christmas but before New Year
if (now.getMonth() === 11 && now.getDate() > 25) {
    christmas.setFullYear(christmas.getFullYear() + 1);
}

// calculate the difference (in ms) between today and Christmas
const diffMs = christmas - now;

// convert the difference in ms back to days
const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));

// output
document.querySelector('.border-green').innerHTML = `
        <p>Today is: <b>${now.toLocaleDateString()}</b></p>
        <p>We are <b>${diffDays}</b> days away from Christmas</p>
    `;
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Days before Christmas (with Luxon - OPTIONAL)

What is missing in the native date functions is the retrieval of the day in text form: we only get a number for the day of the week with getDay()
- To get the name of the day, you have to translate it yourself with, for example, an array
  - getDay() is 0 means Sunday, getDay() is 1 means Monday, ...
The libraries mentioned in the tip above have these translations built-in, and some of them even in different languages
- This (OPTIONAL) example demonstrates how you can use Luxon to get the same (or an even better) result as in the previous example
Open es6/date/christmasLuxon.html and es6/date/christmasLuxon.js

Link to the Luxon CDN BEFORE you write your script

<main class="container">
    ...
    <div class="border-green"></div>
    ...
</main>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.26.0/luxon.min.js"></script>
<script src="christmasLuxon.js"></script>
...
 
        Copied!

1
2
3
4
5
6
7
8
9

Line 2: use Luxon function luxon.DateTime.now() (opens new window) to create a new date/time instance for today
Line 4: use Luxon function luxon.DateTime.local() (opens new window) to create a new date/time instance for Christmas
Line 7: compare both days (opens new window) and add 1 year to christmas if now falls after Christmas and before New Year
(Note that it's not possible to compare native date/time instances this way!)
Line 10: calculate the days between now and next Christmas with diff() (opens new window)
Line 14: format now with now.toFormat() (opens new window) to a human-readable string
Line 17: format now again with now.toFormat() (opens new window) but this time in Dutch

// get the current date
const now = luxon.DateTime.now(); // also try luxon.DateTime.local(2021, 12, 26);
// get next Christmas
let christmas = luxon.DateTime.local(now.year, 12, 25);

// set Christmas to next year if the current date is after Christmas but before New Year
if (now > christmas) christmas = christmas.plus({ years: 1 });

// convert the difference in ms back to days
const diffDays = Math.ceil(christmas.diff(now, 'days').days);

// output
document.querySelector('.border-green').innerHTML = `
        <p>Today is: <b>${now.toFormat('cccc, dd-LL-yyyy')}</b></p>
        <p>We are <b>${diffDays}</b> days away from Christmas</p>
        <hr>
        <p>Vandaag is het:  <b>${now.setLocale('nl').toFormat('cccc, dd LLLL yyyy')}</b></p>`;
 
        Copied!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

READING TIPS