View All Products
Compute
Storage
Networking
Databases
Services
Developer Tools
Industries
Pricing
Community
Engage With Us

Using the Date Object in JavaScript

Published by Linode
Traducciones al Español
Estamos traduciendo nuestros guías y tutoriales al Español. Es posible que usted esté viendo una traducción generada automáticamente. Estamos trabajando con traductores profesionales para verificar las traducciones de nuestro sitio web. Este proyecto es un trabajo en curso.
Create a Linode account to try this guide with a $ credit.
This credit will be applied to any valid services used during your first  days.

When creating a website or application, JavaScript handles dynamic, interactive, and event-driven behavior on your site. The Date object in JS uses a platform-agnostic format to represents a moment in time. This object uses the Number type to designate the date in milliseconds. The milliseconds are the time elapsed since January 1, 1970 UTC. This article covers the basics of getting the current year, month, date, and/or time using the JS Date object. This guide assumes some familiarity with JavaScript.

Understanding JavaScript Date and Unix Time

Unix time is calculated beginning on January 1, 1970 UTC at 00:00 and counts every millisecond that has elapsed. For example, the timestamp for Thursday, January 1 1970 (GMT) would have been 0. The timestamp for one second after midnight (GMT) on Friday, January 1, 2021 would have been 1609459201. The Date object helps you perform this calculation in your JS scripts.

Date has presented some issues over time for developers, due to its reliance on Unix time and the numerous limitations that it presents. For example, Unix time doesn’t work well for non-Gregorian calendars. Also, 32-bit systems using Unix time will encounter an integer overflow issue on January 19, 2038 . There is work being done on the Temporal API to create a modern and more flexible replacement, but it is not yet ready to be used in production environments.

Getting Today’s Date in JS

This section demonstrates the default behavior of the Date object by using it in a script with the getElementByID method. You can run this example on your local workstation (where it shows your local date, time, and GMT offset). You can also run the example on your Linode (where it displays the Linode’s date, time, and GMT offset).

Create a file named date-test.html on your computer with the following content:

File: date-test.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<html>
  <body>

    <h1>JavaScript demo of new Date()</h1>

    <p id="date-demo"></p>

    <script>
      var d = new Date();
      document.getElementById("date-demo").innerHTML = d;
    </script>

  </body>
</html>

Open the file in a browser to see the results. You should see similar results to the example below (date, time, and GMT offset will vary):

Use the Date Object’s Get Methods

The Date object provides several Get methods that you can use to retrieve different data from your Date instance. For example, your website might only need to display the current year (in a copyright statement on a webpage, for example). In that case, you can use the getFullYear() method. Modify your year-test.html example to add the new method as shown below:

File: year-test.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<html>
  <body>

  <h1>JavaScript demo of getFullYear()</h1>

  <p id="year-demo"></p>

  <script>
    var d = new Date();
    document.getElementById("year-demo").innerHTML = d.getFullYear();
  </script>

  </body>
</html>

Reload your browser page and you should see a similar result to the example below: An example of getting full year in JavaScript

You can experiment and change the getFullYear() method to getMonth() or getDay(). Refer to Mozilla’s documentation to view a full list of all available Get methods.

Use the Date Object’s Set Methods

The Date object provides several Set methods that you can use to update an instance of the Date object. Perhaps you need to set a deadline of some sort, or you need to reference a year in the future. You can use the setFullYear() method to achieve this. Modify your year-test.html example to add the new method as shown below:

File: set-year-test.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<html>
  <body>

  <h1>JavaScript demo of setFullYear()</h1>

  <p id="set-demo"></p>

  <script>
    var d = new Date();
    d.setFullYear(2022);
    document.getElementById("set-demo").innerHTML = d;
  </script>

  </body>
</html>

When you reload your browser, notice that the results display the year 2022: An example of setting the year as 2022 in JavaScript

Similar to the Get methods in the previous section, you can experiment with other Set methods. Change the example to use setFullYear(), setMonth(), or setDay(). Refer to Mozilla’s documentation to view a full list of all available Set methods.

Comparing Dates in JS

Now that you are familiar with Get and Set methods, you can use them to compare dates using JavaScript. Referring to the year 2038 problem mentioned in the beginning of the guide, you may want to use the Date object to notify you if it’s January 19, 2038. Modify your year-test.html example to add the JavaScript code to compare Dates:

File: compare-date-test.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html>
  <body>

    <h1>JavaScript date comparison demo</h1>

    <h2>Is it after January 19, 2038?</h2>

    <p id="compare-demo"></p>

    <script>
      var today, someday, text;
      today = new Date();
      someday = new Date();
      someday.setFullYear(2038, 0, 14);

      if (someday > today) {
        text = "No, it is before January 19, 2038.";
      } else {
        text = "Yes, it is after January 19, 2038.";
      }
      document.getElementById("compare-demo").innerHTML = text;
    </script>

  </body>
</html>

The results will look like this (they may vary, or be completely inoperative on a 32-bit system, if it is after January 19, 2038):

Further Reading

The Date object in JavaScript is very powerful and offers several built-in methods to support many uses. You can refer to the W3 Schools tutorial to see a few more examples.

More Information

You may wish to consult the following resources for additional information on this topic. While these are provided in the hope that they will be useful, please note that we cannot vouch for the accuracy or timeliness of externally hosted materials.

This page was originally published on

web applications

Your Feedback Is Important

Let us know if this guide was helpful to you.

Join the conversation.
Read other comments or post your own below. Comments must be respectful, constructive, and relevant to the topic of the guide. Do not post external links or advertisements. Before posting, consider if your comment would be better addressed by contacting our Support team or asking on our Community Site.
The Disqus commenting system for Linode Docs requires the acceptance of Functional Cookies, which allow us to analyze site usage so we can measure and improve performance. To view and create comments for this article, please update your Cookie Preferences on this website and refresh this web page. Please note: You must have JavaScript enabled in your browser.