Getting and formatting date and time in JavaScript
Last updated: July 7, 2022.
The in-built Date()
object constructor can be used to generate date objects containing the date and time now or at custom time points.
Methods available on date and time objects created using the Date()
constructor allow its contents to be output in common formats.
Table of contents
Generating dates
Getting the current date and time
You can get the current date and time by generating a new Date
object:
const date = new Date();
console.log(date); // Mon Jul 04 2022 08:41:40 GMT+0200 (Central European Summer Time)
Setting a custom date and time
For a custom date and time, you enter the information in the Date()
constructor to create a new Date
object:
// Custom date format: YYYY, MM, DD, HH, MM, SS
const a = new Date(2022, 01, 01);
const b = new Date(1892, 06, 20, 13);
const c = new Date(2000, 11, 15, 19, 15, 30);
console.log(a); // Tue Feb 01 2022 00:00:00 GMT+0100 (Central European Standard Time)
console.log(b); // Wed Jul 20 1892 13:00:00 GMT+0105 (Central European Standard Time)
console.log(c); // Fri Dec 15 2000 19:15:30 GMT+0100 (Central European Standard Time)
Gotcha warning
The Date()
constructor starts counting months from 0. So when creating a new date and time using arguments, 0 = January, 1 = February,..., 11 = Decemeber.
To get UTC (Coordinated Universal Time), add the toUTCString()
method:
const now = new Date();
console.log(now); // Mon Jul 04 2022 21:45:32 GMT+0200 (Central European Summer Time)
console.log(now.toUTCString()); // Mon, 04 Jul 2022 19:45:32 GMT
For other time zones, add this inside an options object in the second argument position:
const now = new Date();
console.log(now); // Mon Jul 04 2022 21:50:31 GMT+0200 (Central European Summer Time)
console.log(now.toLocaleString(undefined, {
timeZone: 'America/Chicago'
})); // 04/07/2022, 14:50:31
Displaying and formatting date and time
Default formats
A date and time object created using the Date()
constructor has various methods available on it that output the date and/or time in string format:
const now = new Date();
now.toLocaleString(); // 04/07/2022, 20:31:35
now.toLocaleDateString(); // 04/07/2022
now.toLocaleTimeString(); // 20:31:35
now.toString(); // Mon Jul 04 2022 20:31:35 GMT+0200 (Central European Summer Time)
now.toDateString(); // Mon Jul 04 2022
now.toTimeString(); // 20:31:35 GMT+0200 (Central European Summer Time)
now.toISOString(); // 2022-07-04T18:31:35.398Z
With no arguments, these methods output in the locally accepted format of the user.
You can also specify the formatting by entering a language-country code when calling these methods:
const now = new Date();
now.toLocaleString('en-US'); // 7/4/2022, 9:25:06 PM
now.toLocaleString('en-GB'); // 04/07/2022, 21:25:06
now.toLocaleString('ar-EG'); // ٤/٧/٢٠٢٢, ٩:٣١:٥٦ م
Custom formatting with options
When using the methods available on a Date
object to output its contents in string format, you can customize the output further by adding the following options.
day
: 'numeric' or '2-digit'weekday
: 'narrow', 'short' or 'long'year
: 'numeric' or '2-digit'month
: 'numeric', '2-digit', 'narrow', 'short' or 'long'hour
: 'numeric' or 2-digit'minute
: 'numeric' or '2-digit'second
: 'numeric' or '2-digit'timeZoneName
: 'short' or 'long'hour12
: true or false
The options and their values should be specified in an object and passed in as a second argument to the formatting method.
const now = new Date();
// Default output
now.toLocaleDateString(); // 04/07/2022
// No fixed locale formatting with options
now.toLocaleDateString(undefined, {
weekday: 'long',
month: 'long',
day: 'numeric',
}); // Monday, 4 July
// Fixed 'en-us' formatting with options
now.toLocaleTimeString('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric',
timeZoneName: 'short',
hour12: false,
}); // Monday, July 4 at 21:16:05 GMT+2
Getting parts of the date
You can also return individual parts of the date to create your own formatting.
const now = new Date();
/* Get year */
now.getFullYear() // 2022
/* Get month (0-11) */
now.getMonth() // 6
/* Get day (1-31) */
now.getDate() // 5
/* Get day of the week (0-6) */
now.getDay() // 2
/* Get hour (0-24) */
now.getHours() // 13
/* Get minutes (0-59) */
now.getMinutes() // 56
/* Get seconds (0-59) */
now.getSeconds() // 12
/* Get milliseconds (0-999) */
now.getMilliseconds() // 628
Related links
- MDN Web Docs: Standard in-built objects > Date