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();
let d = new Date(2020, 0, 31);
let d = new Date(0);
let d = new Date('October 16, 1964 11:13:00');

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)
toLocaleString() (opens new window)	(browser default format and timezone)
toLocaleString('en-US', { timeZone: 'America/New_York' })
toUTCString() (opens new window)
toISOString() (opens new window)
toDateString() (opens new window)
toLocaleDateString() (opens new window)	(browser default format and timezone)
toLocaleDateString('en-US', { timeZone: 'America/New_York' })
toTimeString() (opens new window)
toLocaleTimeString() (opens new window)	(browser default format and timezone)
toLocaleTimeString('en-US', { timeZone: 'America/New_York' })

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>

// 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>
    `;

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>
...

• 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>`;

READING TIPS

• Date object@Mozilla (opens new window)
• Date object@W3Schools (opens new window)