6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

Search topics, tutorials, questions and answers... 

HOME HTML5 CSS3 JAVASCRIPT JQUERY BOOTSTRAP5 v4.6 PHP7 SQL REFERENCES EXAMPLES FAQ SNIPPETS

ADVERTISEMENTS
JAVASCRIPT BASIC

JS Introduction
JS Getting Started
JS Syntax
JS Variables
JS Generating Output JavaScript Date and Time
JS Data Types
 
JS Operators In this tutorial you will learn how to work with date and time in JavaScript.
JS Events
JS Strings
JS Numbers Using the Date Object
JS If…Else
The Date object is a built-in JavaScript object. It allows you to get the user's local time by accessing
JS Switch…Case
the computer system clock through the browser. The Date object also provides several methods for
JS Arrays
managing, manipulating, and formatting dates and times.
JS Sorting Arrays
JS Loops
JS Functions Creating a Date Object
JS Objects
Before we start working with the date and time, we need to create a Date object. Unlike other built-in
JAVASCRIPT & DOM
objects, such as arrays or functions, dates don't have a corresponding literal form: all date objects
JS DOM Nodes need to be created using the Date constructor function which is Date() .
JS DOM Selectors
There are four different ways to create a Date object in JavaScript.
JS DOM Styling
JS DOM Get Set Attributes
JS DOM Manipulation The new Date() Syntax
JS DOM Navigation
You can simply declare a new Date object without initializing its value. In this case, the date and time
JAVASCRIPT & BOM value will be set to the current date and time on the user's device on which the script is run.

JS Window
JS Screen Example Try this code »

JS Location 1 var d = new Date();

JS History 2 document.write(d);
JS Navigator
JS Dialog Boxes
The new Date(year, month, ...) Syntax
JS Timers
You can also initialize a Date object by passing the following parameters separated by commas: year,
JAVASCRIPT ADVANCED
month, day, hours, minutes, seconds, and milliseconds.
JS Date and Time
The year and month parameters are required other parameters are optional.
JS Math Operations
JS Type Conversions
Example Try this code »
JS Event Listeners
JS Event Propagation 1 var d = new Date(2018,0,31,14,35,20,50);
JS Borrowing Methods 2 document.write(d);

JS Hoisting Behavior
This date is actually represent 31 January 2018 at 14:35:20 and 50 milliseconds. You can ignore the
JS Closures
time part and specify just the date part if you wish.
JS Strict Mode
JS JSON Parsing
JS Error Handling The new Date(dateString) Syntax
JS Regular Expressions
JavaScript also allows you to create a Date object by passing the string representing a date, or a date
JS Form Validation
and time, as shown in the following example:
JS Cookies
JS AJAX Requests
Example Try this code »
JS ES6 Features
https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 1/6
6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

1 var d = new Date("31 January 2018");

JAVASCRIPT EXAMPLES 2 document.write(d);
JS Practice Examples
JS FAQ's Answers This date represents 31 January 2018. You can also specify strings like Jan 31 2018, or any of a number
of valid variations, JavaScript will automatically handle that.
JAVASCRIPT REFERENCE

JS Properties and Methods The new Date(milliseconds) Syntax

JS Reserved Keywords
More references You can also define a Date object by passing the number of milliseconds since January 1, 1970, at
00:00:00 GMT. This time is known as the UNIX epoch because 1970 was the year when the UNIX
operating system was formally introduced. Here's an example:

Example Try this code »

1 var d = new Date(1517356800000);

2 document.write(d);

The above date represents Wednesday 31 January 2018 05:30:00 GMT+0530.

Once you have created an instance of the Date object, you can use its methods to perform various
tasks, such as getting different component of a date, setting or modifying individual date and time
value, etc. These methods are described in detail in the following sections.

Note: JavaScript provides shortcuts called "literals" for creating most of the native object


without having to use the new operator, like new Object(), new Array(), etc.

Getting the Current Date and Time

To get the current date and time, create a new Date object without passing any parameters. This will
create an object with the current date and time. Here's an example:

Example Try this code »

1 var now = new Date();

2 alert(now); // Display the current date and time

The output of this example will look something like this (depending on time zone offset):

Fri Jun 23 2023 15:15:04 GMT+0100 (West Africa Standard Time)

Creating the Date and Time Strings

The JavaScript Date object provides several methods, such as toDateString() ,
toLocaleDateString() , etc. to generate date strings in different formats. Here's is an example:

Example Try this code »

1 var d = new Date();

2 alert(d.toDateString()); // Display an abbreviated date string
3 alert(d.toLocaleDateString()); // Display a localized date string
4 alert(d.toISOString()); // Display the ISO standardized date string
5 alert(d.toUTCString()); // Display a date string converted to UTC time
6 alert(d.toString()); // Display the full date string with local time zone

Similarly, you can use the toLocaleTimeString() , toTimeString() methods of the Date object to
generate time strings, as shown in the following example:

Example Try this code »

https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 2/6
6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

1 var d = new Date();

2 alert(d.toTimeString()); // Display the time portion of the date
3 alert(d.toLocaleTimeString()); // Display a localized time string

Getting Specific Date and Time Components

Once you have a proper date object, a number of methods are available to you to extract details from
it, such as the month, date, hours or minutes value etc. The following section describes the various
methods of extracting individual pieces of information from a Date object.

Getting the Year, Month and Date

The Date object provides several methods such as getFullYear() , getMonth() , getDay() , etc. that
you can use to extract the specific date components from the Date object, such as year, day of month,
day of week, etc. respectively. The following example demonstrates how to get specific date
components from the Date object using these methods:

Example Try this code »

1 var d = new Date();

2 // Extracting date part
3 alert(d.getDate()); // Display the day of the month
4 alert(d.getDay()); // Display the number of days into the week (0-6)
5 alert(d.getMonth()); // Display the number of months into the year (0-11)
6 alert(d.getFullYear()); // Display the full year (four digits)

The getDay() method returns a number representing the day of the week (from 0 to 6) instead of
returning a name such as Sunday or Monday in such a way that, if it is Sunday, the method returns 0;
and if it is Monday , the method returns 1, and so on.

Likewise, the getMonth() method returns the number of months (from 0 to 11) instead of name of
the month. Here 0 represents the first month of the year. Therefore, if it is January the method returns
0 not 1; and if it is August, the method returns 7.

Getting the Hours, Minutes, Seconds, and Milliseconds

Similarly, the Date object provides methods like getHours() , getMinutes() , getSeconds() ,
getTimezoneOffset() etc. to extract the time components from the Date object.

Example Try this code »

1 var d = new Date();

2 // Extracting time part
3 alert(d.getHours()); // Display the number of hours into the day (0-23)
4 alert(d.getMinutes()); // Display the number of minutes into the hour (0-59)
5 alert(d.getSeconds()); // Display the seconds into the minute (0-59)
6 alert(d.getMilliseconds()); // Display the number of milliseconds into second
(0-999)
7 alert(d.getTime()); // Display the number of milliseconds since 1/1/1970
8 alert(d.getTimezoneOffset()); // Display the time-zone offset (from Greenwich
Mean Time) in minutes

The getHours() method returns the number of hours into the day (from 0 to 23) according to the
24-hour clock. So, when it is midnight, the method returns 0; and when it is 3:00 P.M., it returns 15.

Note: The Date objects also have methods to obtain the UTC components. Just place UTC


after get, such as getUTCDate(), getUTCHour(), getUTCMinutes(), and so on.

https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 3/6
6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

Setting the Date and Time Values

In addition to retrieving date and time values, you can also set or modify these values using the
JavaScript. This is most often used in program where you have to change the value of a date object
from one particular date or time to another. Let's see how it works.

Setting the Year, Month and Date

The Date object provides methods such as setFullYear() , setMonth() and setDate() methods to
set the year, month, date components of the Date object respectively.

For instance, in the following example we have used setFullYear() method to change the current
date stored in a variable ahead of two year in the future.

Example Try this code »

1 var d = new Date();

2 d.setFullYear(d.getFullYear() + 2);
3 alert(d); // Display future date

The output of the above example will look something like this:

Mon Jun 23 2025 15:15:04 GMT+0100 (West Africa Standard Time)

Likewise, you can use the setMonth() method to set or modify the month part of a Date object.

Example Try this code »

1 var d = new Date(); // Current date and time

2 d.setMonth(0); // Sets month to 0, January
3 document.write(d);

The setMonth() method require an integer value from 0 to 11, if you set the value of the month
greater than 11, the year value of the date object will increment.

In other words, a value of 12 results in the year value increasing by 1, and the month value set to 0, as
demonstrated in the following example:

Example Try this code »

1 var d = new Date(2018, 5, 24); // June 24, 2018

2 d.setMonth(12); // Sets month to 12, new date will be January 24, 2019
3 document.write(d);

Similarly, you can modify the date part of the date object, like this:

Example Try this code »

1 var d = new Date(2018, 5, 24); // June 24, 2018

2 d.setDate(15); // Sets date to 15, new date will be June 15, 2018
3 document.write(d);

The setDate() method require an integer value from 1 to 31. Also, if you pass the values greater
than the number of days in the month, the month will increment. For example:

Example Try this code »

1 var d = new Date(2018, 5, 24); // June 24, 2018

2 d.setDate(36); // Sets day to 36, new date will be July 6, 2018
3 document.write(d);

Setting the Hours, Minutes and Seconds

https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 4/6
6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

Methods for setting the time values are also pretty straight forward. The setHours() , setMinutes() ,
setSeconds() , setMilliseconds() can be used to set the hour, minutes, seconds, and milliseconds
part of the Date object respectively.

Each method takes integer values as parameters. Hours range from 0 to 23. Minutes and seconds
range from 0 to 59. And milliseconds range from 0 to 999. Here is an example:

Example Try this code »

1 var d = new Date(2018, 5, 24); // June 24, 2018 00:00:00

2 d.setHours(8);
3 d.setMinutes(30);
4 d.setSeconds(45);
5 d.setMilliseconds(600);
6 document.write(d);

The output of the above example will look something like the following:

Sun Jun 24 2018 08:30:45 GMT+0100 (West Africa Standard Time)

« PREVIOUS PAGE NEXT PAGE »

ADVERTISEMENTS

Is this website helpful to you? Please give us a like, or share your feedback to help us improve. Connect with us on Facebook and Twitter for th

ABOUT US CONTACT INTERACTIVE TOOLS

Our Story Contact Us Bootstrap Icon Search Utility HTML Formatter

Terms of Use Report Error Title & Meta Length Calculator HTML Color Picker

Privacy Policy Advertise Bootstrap Button Generator SQL Playground

Font Awesome Icon Finder HTML Editor

Copyright © 2023 Tutorial Republic. All Rights Reserved.

https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 5/6
6/23/23, 3:15 PM JavaScript Date and Time - Tutorial Republic

Sh

https://www.tutorialrepublic.com/javascript-tutorial/javascript-date-and-time.php 6/6