JavaScript Date getFullYear() Method: Getting the Full Year
The getFullYear() method in JavaScript is a fundamental function for extracting the year from a Date object. It returns the full year (four digits), ensuring accurate representation of dates beyond the year 99. This method is essential for any application that deals with date calculations, formatting, or display, providing a reliable way to retrieve the year component of a date.
Purpose of the getFullYear() Method
The primary purpose of the getFullYear() method is to:
- Retrieve the full year (e.g., 2024, 2025, etc.) from a
Dateobject. - Ensure accurate representation of years, avoiding ambiguity with two-digit year formats.
- Facilitate date manipulation, comparison, and display in web applications.
Syntax
The getFullYear() method does not accept any parameters. It is called on a Date object and returns an integer representing the full year.
dateObject.getFullYear();
Here, dateObject is an instance of the JavaScript Date object.
Return Value
The getFullYear() method returns:
- A number representing the full year of the date (e.g., 2024).
Examples
Let’s explore the usage of the getFullYear() method with different examples to understand its functionality.
Basic Usage
This example demonstrates how to use getFullYear() to get the current year.
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Basic Example</title>
</head>
<body>
<p id="basic_year"></p>
<script>
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
document.getElementById("basic_year").textContent = "The current year is: " + currentYear;
</script>
</body>
</html>
Output:
The current year is: 2024
(Note: The year displayed will be the current year when the code is executed.)
Using with a Specific Date
This example shows how to get the full year from a specific date.
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Specific Date</title>
</head>
<body>
<p id="specific_year"></p>
<script>
const specificDate = new Date('2025-07-20');
const year = specificDate.getFullYear();
document.getElementById("specific_year").textContent = "The year of the specific date is: " + year;
</script>
</body>
</html>
Output:
The year of the specific date is: 2025
Setting and Getting Year
This example demonstrates how to set a date with a specific year and retrieve it using getFullYear().
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Setting Date</title>
</head>
<body>
<p id="set_get_year"></p>
<script>
const setDate = new Date();
setDate.setFullYear(2030);
const setGetYear = setDate.getFullYear();
document.getElementById('set_get_year').textContent = "The set year using setFullYear() is: " + setGetYear;
</script>
</body>
</html>
Output:
The set year using setFullYear() is: 2030
Displaying the Year in a Canvas
This example integrates the getFullYear() method with the HTML5 canvas API to dynamically display the current year.
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Canvas Example</title>
<style>
body { font-family: sans-serif; }
</style>
</head>
<body>
<canvas id="yearCanvas" width="300" height="100" style="border:1px solid #000;"></canvas>
<script>
const canvas_year = document.getElementById('yearCanvas');
const ctx_year = canvas_year.getContext('2d');
const today = new Date();
const fullYear = today.getFullYear();
ctx_year.font = '30px Arial';
ctx_year.fillStyle = 'darkblue';
ctx_year.textAlign = 'center';
ctx_year.fillText('The year is: ' + fullYear, canvas_year.width / 2, canvas_year.height / 2 + 10);
</script>
</body>
</html>
Output:
The Canvas will display the current year (e.g. The year is: 2024).
Handling Date Objects from Different Sources
In this example, we demonstrate handling date objects that may come from different sources.
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Different Date Sources</title>
</head>
<body>
<p id="date_sources_year"></p>
<script>
const dateString = "2026-04-15T10:20:30Z";
const dateFromISO = new Date(dateString);
const timestamp = 1728384000000;
const dateFromTimestamp = new Date(timestamp);
const yearFromISO = dateFromISO.getFullYear();
const yearFromTimestamp = dateFromTimestamp.getFullYear();
document.getElementById("date_sources_year").textContent =
"Year from ISO string: " + yearFromISO + ", Year from Timestamp: " + yearFromTimestamp;
</script>
</body>
</html>
Output:
Year from ISO string: 2026, Year from Timestamp: 2024
Example with a date in the past
<!DOCTYPE html>
<html>
<head>
<title>getFullYear() Past Year Example</title>
</head>
<body>
<p id="past_year_text"></p>
<script>
const pastDate = new Date("1995-05-10");
const pastYear = pastDate.getFullYear();
document.getElementById("past_year_text").textContent = "The year in the past is: " + pastYear;
</script>
</body>
</html>
Output:
The year in the past is: 1995
Important Points
- The
getFullYear()method always returns a four-digit year. - This method is preferred over
getYear()which might return a two-digit year. getFullYear()is essential for robust date handling in JavaScript.- It’s compatible with all modern browsers and JavaScript environments.
Browser Support
The getFullYear() method is widely supported across all modern web browsers. This method is a part of the core JavaScript language and has been available since its early versions, making it reliable for use in any web application.
Conclusion
The getFullYear() method in JavaScript’s Date object is a crucial tool for accurately extracting the full year from a date. Its consistent and reliable nature ensures your web applications handle dates effectively, making it a staple for web developers. Understanding and using getFullYear() properly can significantly improve your date manipulation capabilities.
