Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

JavaScript Dates

JavaScript Date Components

Written by Published

Getters read each part of a date, and setters change them.

Each part has both a local and a UTC version.

Mixing the two is a reliable source of off-by-one-day bugs.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15, 14, 30, 45));

console.log(date.getUTCFullYear());
console.log(date.getUTCHours());
console.log(date.getUTCMinutes());

The output is 2026, 14, 30.

The Getters

getFullYear, getMonth, getDate for the date.

getHours, getMinutes, getSeconds for the time.

getDay gives the weekday, where 0 is Sunday.

Syntax

Syntax

javascript

date.getFullYear();
date.getUTCFullYear();

Pick local or UTC and use it consistently.

getDay Is Not getDate

getDate is the day of the month.

getDay is the day of the week.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.getUTCDate());
console.log(date.getUTCDay());

The names are unhelpfully similar, so read carefully.

Naming the Weekday

An array turns the number into a name.

Example

Example

javascript

const names = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const date = new Date(Date.UTC(2026, 0, 15));

console.log(names[date.getUTCDay()]);

toLocaleDateString does this properly for other languages.

getFullYear, Not getYear

getYear is an ancient method that returns the year minus 1900.

Always use getFullYear.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

console.log(date.getUTCFullYear());
console.log(date.getUTCFullYear() === 2026);

The old method still exists, which is why the mistake persists.

The Setters

Each getter has a matching setter that changes the date in place.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15));

date.setUTCFullYear(2027);
date.setUTCMonth(5);

console.log(date.getUTCFullYear());
console.log(date.getUTCMonth());

The output is 2027 then 5.

Building a Time String

Padding keeps the display steady.

Example

Example

javascript

const date = new Date(Date.UTC(2026, 0, 15, 9, 5));

const time = String(date.getUTCHours()).padStart(2, "0") + ":" +
  String(date.getUTCMinutes()).padStart(2, "0");

console.log(time);

The output is 09:05.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Date Components</title>
</head>
<body>

  <h1>Date Components</h1>

  <p id="out"></p>

  <script>
    const names = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    const date = new Date(Date.UTC(2026, 0, 15, 9, 5));

    document.getElementById("out").innerHTML =
      "Year: " + date.getUTCFullYear() +
      "<br>Day of month: " + date.getUTCDate() +
      "<br>Weekday: " + names[date.getUTCDay()] +
      "<br>Time: " + String(date.getUTCHours()).padStart(2, "0") +
        ":" + String(date.getUTCMinutes()).padStart(2, "0");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try another date:

Change the day and watch the weekday name change.

Important Points

  • getDate is the day of the month.
  • getDay is the day of the week, starting at Sunday.
  • Always use getFullYear.
  • Setters change the date in place.
  • Pad the parts when building a time string.

Conclusion

The getters are straightforward once getDay and getDate are clear.

Sticking to either local or UTC throughout avoids off-by-one bugs.

For display, the locale formatters are better than building strings yourself.

PreviousJavaScript Date ArithmeticNextJavaScript Timestamps