Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to use year input type in HTML?
HTML does not have a dedicated year input type. However, you can create year input functionality using several approaches: the <input type="number"> element with constraints, the <input type="date"> element, or by implementing custom year picker solutions with JavaScript libraries like jQuery UI.
Using Number Input Type for Year
The most common approach is to use <input type="number"> with min and max attributes to constrain the year range. The placeholder attribute helps users understand the expected format.
Syntax
<input type="number" placeholder="YYYY" min="minYear" max="maxYear">
Example
Following example creates a year input field using a number input type −
<!DOCTYPE html>
<html>
<head>
<title>Year Input with Number Type</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Birth Year Input</h2>
<form>
<label for="birthYear">Enter Birth Year:</label><br>
<input type="number" id="birthYear" name="birthYear"
placeholder="YYYY" min="1900" max="2023"
style="padding: 8px; margin: 10px 0; width: 150px;">
<br>
<button type="button" onclick="showYear()">Show Selected Year</button>
<p id="result"></p>
</form>
<script>
function showYear() {
var year = document.getElementById("birthYear").value;
var resultElement = document.getElementById("result");
if (year) {
resultElement.textContent = "Selected year: " + year;
} else {
resultElement.textContent = "Please enter a year.";
}
}
</script>
</body>
</html>
The output shows a number input field restricted to years between 1900 and 2023 −
Birth Year Input Enter Birth Year: [1995 ] (number input field with spinner controls) [Show Selected Year] (After entering 1995 and clicking button: "Selected year: 1995")
Using Date Input Type for Year Selection
You can use <input type="date"> and extract the year value using JavaScript. This provides a native date picker interface.
Example
<!DOCTYPE html>
<html>
<head>
<title>Year from Date Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Select Date to Extract Year</h2>
<form>
<label for="dateInput">Select Date:</label><br>
<input type="date" id="dateInput" name="dateInput"
style="padding: 8px; margin: 10px 0; width: 150px;"
onchange="extractYear()">
<br>
<p>Extracted Year: <span id="yearDisplay">None selected</span></p>
</form>
<script>
function extractYear() {
var dateInput = document.getElementById("dateInput").value;
var yearDisplay = document.getElementById("yearDisplay");
if (dateInput) {
var year = new Date(dateInput).getFullYear();
yearDisplay.textContent = year;
} else {
yearDisplay.textContent = "None selected";
}
}
</script>
</body>
</html>
The output displays a date picker that automatically extracts the year when a date is selected −
Select Date to Extract Year Select Date: [06/15/2023] (date picker) Extracted Year: 2023
Using jQuery UI Datepicker for Year-Only Selection
jQuery UI datepicker can be configured to show only years, providing a more specialized year selection interface.
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery Year Picker</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/ui-lightness/jquery-ui.css">
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>jQuery Year Picker</h2>
<form>
<label for="yearPicker">Select Year:</label><br>
<input type="text" id="yearPicker" name="yearPicker"
placeholder="Click to select year" readonly
style="padding: 8px; margin: 10px 0; width: 150px; cursor: pointer;">
<br>
<button type="button" onclick="getSelectedYear()">Get Year</button>
<p id="selectedYear"></p>
</form>
<script>
$(function() {
$("#yearPicker").datepicker({
dateFormat: "yy",
changeYear: true,
showButtonPanel: true,
yearRange: "1950:2030",
onClose: function(dateText, inst) {
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val(year);
}
}).focus(function() {
$(".ui-datepicker-month").hide();
$(".ui-datepicker-calendar").hide();
});
});
function getSelectedYear() {
var year = $("#yearPicker").val();
var display = $("#selectedYear");
if (year) {
display.text("Selected year: " + year);
} else {
display.text("No year selected");
}
}
</script>
</body>
</html>
This creates a specialized year picker interface using jQuery UI −
jQuery Year Picker Select Year: [2023 ] (clickable field) [Get Year] (After selection: "Selected year: 2023")
Creating a Custom Year Dropdown
For simple year selection, you can create a dropdown list with predefined year options.
Example
<!DOCTYPE html>
<html>
<head>
<title>Year Dropdown Selection</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Year Selection Dropdown</h2>
<form>
<label for="yearSelect">Choose Birth Year:</label><br>
<select id="yearSelect" name="yearSelect"
style="padding: 8px; margin: 10px 0; width: 160px;">
<option value="">Select a year</option>
</select>
<br>
<button type="button" onclick="displaySelection()">Show Selected Year</button>
<p id="output"></p>
</form>
<script>
// Populate dropdown with years
var yearSelect = document.getElementById("yearSelect");
var currentYear = new Date().getFullYear();
for (var year = currentYear; year >= 1950; year--) {
var option = document.createElement("option");
option.value = year;
option.textContent = year;
yearSelect.appendChild(option);
}
function displaySelection() {
var selectedYear = yearSelect.value;
var output = document.getElementById("output");
if (selectedYear) {
output.textContent = "You selected: " + selectedYear;
} else {
output.textContent = "Please select a year";
}
}
</script>
</body>
</html>
The script dynamically generates year options from the current year back to 1950 −
Year Selection Dropdown Choose Birth Year: [Select a year ?] (dropdown with years 2023, 2022, 2021... down to 1950) [Show Selected Year] (After selection: "You selected: 1995")
Comparison of Year Input Methods
Following table compares different approaches for year input −
| Method | Pros | Cons | Best Use Case |
|---|---|---|---|
| Number Input | Native HTML5, mobile-friendly, simple validation | No visual calendar, requires min/max constraints | Birth years, graduation years |
| Date Input + JavaScript | Native date picker, accessible | Shows full date interface, needs JS extraction | When year is part of date selection |
| jQuery UI Datepicker | Year-only interface, professional look | Requires external library, larger file size | Complex forms, year-specific selection |
| Custom Dropdown | Simple, no dependencies, customizable range | Fixed options, no free-form input | Limited year ranges, birth year selection |
Conclusion
While HTML lacks a dedicated year input type, you can effectively create year input functionality using <input type="number"> with constraints, date inputs with JavaScript extraction, or custom solutions with libraries like jQuery UI. Choose the method that best fits your application's requirements and user experience goals.
25K+ Views
