javascript date - javascript date formatting - javascript time - javascript time formatting

Javascript Date — Creating, Getting, and Setting Time

Dates (and times) are integral to most computer software. Javascript provides a Date object and a whole library of related functions, which will be explored here, as well as some modern functions to write completely internationalized code.

Creating A New Javascript Date Object

The Javascript Date object holds one timestamp. Following show the various way a new Date object can be created and it’s value.

Creating a new object without passing any parameters results in the current time being stored. The appropriate timezone information is derived from the browser’s settings. As this is being written near San Francisco, California, the zone offsite is 7 hours behind GMT (GMT-0700), with the zone string of “America/Los_Angeles” being returned by the Intl.DateTimeFormat() function.

console.log( new Date() ) ;
// --> Wed Aug 04 2021 09:14:57 GMT-0700 (Pacific Daylight Time)

The individual time components may be provided as parameters. Here are year, month (starting with zero), day, hour, minute, second, and milliseconds all being specified.

console.log( new Date( 1970, 0, 2, 13, 14, 59, 0 ) ) ;
// --> Fri Jan 02 1970 13:14:59 GMT-0800 (Pacific Standard Time)

Milliseconds since the beginning of UNIX time is a common way of internally capturing and manipulating time; it may be passed as well. (Interactively explore GMT and local time at currentmillis.)

console.log( new Date( 1628093635551 ) ) ;
// --> Wed Aug 04 2021 09:13:55 GMT-0700 (Pacific Daylight Time)

A variety of human-readable date-time descriptions are supported. (The canonical reference for such things is the. Since 1971 “man pages” have been the canonical reference for the implementations of core Internet functionality; see the date(1) man page for the time string components.) All of the following ways of creating a new Date object are equivalent.

console.log( new Date( "Wed Aug 04 2021 13:14:15 GMT-0700" ) ) ;
console.log( new Date( "Aug 04 2021 13:14:15 GMT-0700" ) ) ;
console.log( new Date( "8/4/2021 13:14:15 GMT-0700" ) ) ;
console.log( new Date( "8/4/2021 13:14:15" ) ) ;
// --> Wed Aug 04 2021 13:14:15 GMT-0700 (Pacific Daylight Time)

console.log(Intl.DateTimeFormat().resolvedOptions().timeZone)
// --> America/Los_Angeles
console.log( new Date().getTimezoneOffset() / 60 ) ;
// --> 7

One and two digit years will be interpreted as being in the twentieth century; 19xx.

console.log( new Date(99, 0, 1) ) ;
// --> ​​Fri Jan 01 1999 00:00:00 GMT-0800 (Pacific Standard Time)

Compare the difference between creating a date object with Date() and Date.UTC(); the latter is a better choice if your consumers span the globe.

let date = new Date( 2020, 11, 31, 23, 59, 59, 0 ) ;
console.log( date ) ;
// --> Thu Dec 31 2020 23:59:59 GMT-0800 (Pacific Standard Time)

let date = new Date( Date.UTC( 2020, 11, 31, 23, 59, 59, 0 ) ) ;
console.log( date ) ;
// --> Thu Dec 31 2020 15:59:59 GMT-0800 (Pacific Standard Time)

Printing Date Object Values

Extracting the user’s language locale and outputting date-time strings in a well-understood format is trivial with the Intl.DateTimeFormat() function. Note the difference ways of presenting year, month, and date:

// en-US: English in the USA
console.log( new Intl.DateTimeFormat('en-US').format(date) ) ;
// --> 12/31/2020

// es-ES: Spanish (Español) in Spain (España)
console.log( new Intl.DateTimeFormat('es-ES').format(date) ) ;
// --> 31/12/2020

// ko-KR: Korean in Korea
console.log( new Intl.DateTimeFormat('ko-KR').format(date) ) ;
// --> 2020. 12. 31.
 
// ar-EG: Arabic in Egypt
console.log( new Intl.DateTimeFormat('ar-EG').format(date) ) ;
// --> ٣١‏/١٢‏/٢٠٢٠

// he-IL: Hebrew in Israel (uses “Arabic” numerals)
console.log( new Intl.DateTimeFormat('he-IL').format(date) ) ;
// --> 31.12.2020

Should a language not be supported, for example Balinese (ban), backup languages may be specified (in this case, English).

console.log( new Intl.DateTimeFormat(['ban', 'en']).format(date) ) ;
// --> 12/31/2020

Formatting demands may be specified in CSS style options formats of short, medium, long, and full:

console.log( new Intl.DateTimeFormat('en-GB',
  { dateStyle: 'short', timeStyle: 'long' }).format(date) );
// --> 31/12/2020, 15:59:59 GMT-8
 
console.log( new Intl.DateTimeFormat('en-GB',
  { dateStyle: 'medium', timeStyle: 'long' }).format(date) );
// --> 31 Dec 2020, 15:59:59 GMT-8
 
console.log( new Intl.DateTimeFormat('en-GB',
  { dateStyle: 'long', timeStyle: 'long' }).format(date) );
// --> 31 December 2020 at 15:59:59 GMT-8
 
console.log( new Intl.DateTimeFormat('en-GB',
  { dateStyle: 'full', timeStyle: 'long' }).format(date) );
// --> Thursday, 31 December 2020 at 15:59:59 GMT-8

Getting and Setting Individual Date Object Components

The general design pattern of component objects includes functions which retrieve and set individual values — “getters” and “setters”, respectively. Javascript Date objects have several classes of these, the getters are demonstrated here; the setters are the mirror image with “set” in place of “get” in the function names.

Basic Date() object component extraction

These functions work on the user’s local time, as determined by the web browser.

// day of month (1-31)
console.log ( date.getDate( date ) ) ;
// --> 31
 
// day of the week (from 0-6)
console.log ( date.getDay( date ) ) ;
// --> 4
 
// year -- use getFullYear() instead of the deprecated getYear()
console.log ( date.getFullYear( date ) ) ;
// --> 2020
 
// hour (from 0-23)
console.log ( date.getHours( date ) ) ;
// --> 15
 
// milliseconds (from 0-999)
console.log ( date.getMilliseconds( date ) ) ;
// --> 0
 
// minutes (from 0-59)
console.log ( date.getMinutes( date ) ) ;
// --> 59
 
// month (from 0-11)
console.log ( date.getMonth( date ) ) ;
// --> 11
 
// seconds (from 0-59)
console.log ( date.getSeconds( date ) ) ;
// --> 59
 
// number of milliseconds since UNIX epoch (midnight 1 Jan 1970)
console.log ( date.getTime( date ) ) ;
// --> 1609459199000
 
// minutes between UTC time and local time
console.log ( date.getTimezoneOffset( date ) ) ;
// --> 480

Via the getUTC() internationalized functions

These functions work on universal time instead of the user’s local time.

// day of the month, according to universal time (from 1-31)
console.log ( date.getUTCDate( date ) ) ;
// --> 31
 
// day of the week, according to universal time (from 0-6)
console.log ( date.getUTCDay( date ) ) ;
// --> 4
 
// year, according to universal time
console.log ( date.getUTCFullYear( date ) ) ;
// --> 2020
 
// hour, according to universal time (from 0-23)
console.log ( date.getUTCHours( date ) ) ;
// --> 23
 
// milliseconds, according to universal time (from 0-999)
console.log ( date.getUTCMilliseconds( date ) ) ;
// --> 0
 
// minutes, according to universal time (from 0-59)
console.log ( date.getUTCMinutes( date ) ) ;
// --> 59
 
// month, according to universal time (from 0-11)
console.log ( date.getUTCMonth( date ) ) ;
// --> 11
 
// seconds, according to universal time (from 0-59)
console.log ( date.getUTCSeconds( date ) ) ;
// --> 59

Other Javascript Date Output Functions

The following are a few miscellaneous Javascript Date object output functions:

console.log ( date.toJSON() ) ;
console.log ( date.toISOString() ) ;
// --> 2020-12-31T23:59:59.000Z
 
console.log ( date.toUTCString() ) ;
// --> Thu, 31 Dec 2020 23:59:59 GMT
 
console.log ( date.toDateString() ) ;
// --> Thu Dec 31 2020

Conclusion

This blog post covers various methods to get and set Javascript Date object parts, both for the user’s local time and universal time, including the new Intl formatting class.

Start Learning

To learn more about Javascript, check out other Javascript blog posts and enroll in our Javascript Nanodegree programs, including Intermediate Javascript.

Source Code

Complete source code, when needed to expand upon the snippets above, will be included below, ready for use in an online Javascript tester like PlayCode.