Can I use an HTML input type "date" to collect only a year?

Html Problem Overview

I have a field that is required to collect a year from the user (i.e. a date with a year resolution - for ease of storage I'd prefer to store an actual date value and not a number).

I would like to use the date input UI supported by modern browsers or webshims because its nice and plays well with modern platforms. I couldn't figure out how to get the UI to display only the year. Any ideas?

If there is no platform support, ideally I would like to have a UI something like you can see here if you click "Preview" and then click the top of the widget a couple of times, except in reverse: when you first click the input you get a widget with a list of decades, then you drill down to choose the year, then the UI closes.

Html Solutions

Solution 1 - Html

No you can not but you may want to use input type number as a workaround. Look at the following example:

<input type="number" min="1900" max="2099" step="1" value="2016" />

Solution 2 - Html

No, you can't, it doesn't support only year, so to do that you need a script, like jQuery or the webshim link you have, which shows year only.

If jQuery would be an option, here is one, borrowed from Sibu:

Javascript

$(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy'});
});

CSS

.ui-datepicker-calendar {
   display: none;
}

Src: https://stackoverflow.com/a/13528855/2827823

Src fiddle: http://jsfiddle.net/vW8zc/

Here is an updated fiddle, without the month and prev/next buttons

If bootstrap is an option, check this link, they have a layout how you want.

Solution 3 - Html

There is input type month in HTML5 which allows to select month and year. Month selector works with autocomplete.

Check the example in JSFiddle.

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Select a month below</h1>
    </header>
    Month example
    <input type="month" />
</body>
</html>

Solution 4 - Html

You can do the following:

Generate an Array of the years I'll be accepting,
Use a select box.
Use each item from your Array as an 'option' tag.

Example using PHP (you can do this in any language of your choice):

Server:

<?php $years = range(1900, strftime("%Y", time())); ?>

HTML

<select>
  <option>Select Year</option>
  <?php foreach($years as $year) : ?>
    <option value="<?php echo $year; ?>"><?php echo $year; ?></option>
  <?php endforeach; ?>
</select>

As an added benefit, this has a 100% browser compatibility ;-)

Solution 5 - Html

I try with this, no modifications on the css.

$(function() {
  $('#datepicker').datepicker({
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, 1));
    }
  });

  $("#datepicker").focus(function() {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>

Example code jsfiddle

Solution 6 - Html

Add this code structure to your page code

<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=1900; $year<=date('Y'); $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>

It works perfectly and can be reverse engineered

<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=date('Y'); $year>=1900; $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>

With this you are good to go. 

Solution 7 - Html

	<!--This yearpicker development from Zlatko Borojevic
	html elemnts can generate with java function
    and then declare as custom type for easy use in all html documents 
	For this version for implementacion in your document can use:
	1. Save this code for example: "yearonly.html"
	2. creaate one div with id="yearonly"
	3. Include year picker with function: $("#yearonly").load("yearonly.html"); 
	
	<div id="yearonly"></div>
	<script>
	$("#yearonly").load("yearonly.html"); 
	</script>
	-->

	
	
	<!DOCTYPE html>
	<meta name="viewport" content="text-align:center; width=device-width, initial-scale=1.0">
	<html>
	<body>
	<style>
	.ydiv {
	border:solid 1px;
	width:200px;
	//height:150px;
	background-color:#D8D8D8;
	display:none;
	position:absolute;
	top:40px;
	}

	.ybutton {

    border: none;
    width:35px;
	height:35px;
    background-color:#D8D8D8;
	font-size:100%;
	}

	.yhr {
	background-color:black;
	color:black;
	height:1px">
	}

	.ytext {
	border:none;
	text-align:center;
	width:118px;
	font-size:100%;
	background-color:#D8D8D8;
	font-weight:bold;

	}
	</style>
	<p>
	<!-- input text for display result of yearpicker -->
	<input type = "text" id="yeardate"><button style="width:21px;height:21px"onclick="enabledisable()">V</button></p>

	<!-- yearpicker panel for change only year-->
	<div class="ydiv" id = "yearpicker">
	<button class="ybutton" style="font-weight:bold;"onclick="changedecade('back')"><</button>

	<input class ="ytext" id="dec"  type="text" value ="2018" >
	
	<button class="ybutton" style="font-weight:bold;" onclick="changedecade('next')">></button>
	<hr></hr>



    <!-- subpanel with one year 0-9 -->
	<button  class="ybutton"  onclick="yearone = 0;setyear()">0</button>
	<button  class="ybutton"  onclick="yearone = 1;setyear()">1</button>
	<button  class="ybutton"  onclick="yearone = 2;setyear()">2</button>
	<button  class="ybutton"  onclick="yearone = 3;setyear()">3</button>
	<button  class="ybutton"  onclick="yearone = 4;setyear()">4</button><br>
	<button  class="ybutton"  onclick="yearone = 5;setyear()">5</button>
	<button  class="ybutton"  onclick="yearone = 6;setyear()">6</button>
	<button  class="ybutton"  onclick="yearone = 7;setyear()">7</button>
	<button  class="ybutton"  onclick="yearone = 8;setyear()">8</button>
	<button  class="ybutton"  onclick="yearone = 9;setyear()">9</button>
	</div>
    <!-- end year panel	-->



	<script>
	var date = new Date();
	var year = date.getFullYear(); //get current year
	//document.getElementById("yeardate").value = year;// can rem if filing text from database

	var yearone = 0;
	
	function changedecade(val1){ //change decade for year

	var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
	if (val1 == "next"){
	document.getElementById('dec').value = x + 10;
	}else{
	document.getElementById('dec').value = x - 10;
	}
	}
	
	function setyear(){ //set full year as sum decade and one year in decade
	var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
    var y = parseFloat(yearone);

	var suma = x + y;
    var d = new Date();
    d.setFullYear(suma);
	var year = d.getFullYear();
	document.getElementById("dec").value = year;
	document.getElementById("yeardate").value = year;
	document.getElementById("yearpicker").style.display = "none";
	yearone = 0;
	}
	
	function enabledisable(){ //enable/disable year panel
	if (document.getElementById("yearpicker").style.display == "block"){
	document.getElementById("yearpicker").style.display = "none";}else{
	document.getElementById("yearpicker").style.display = "block";
	}
	
	}
	</script>
	</body>
	</html>

Content Type	Original Author	Original Content on Stackoverflow
Question	Guss	View Question on Stackoverflow
Solution 1 - Html	Blackbam	View Answer on Stackoverflow
Solution 2 - Html	Asons	View Answer on Stackoverflow
Solution 3 - Html	Wallkicker	View Answer on Stackoverflow
Solution 4 - Html	David Lartey	View Answer on Stackoverflow
Solution 5 - Html	Johan Morales	View Answer on Stackoverflow
Solution 6 - Html	Micolay	View Answer on Stackoverflow
Solution 7 - Html	Zlatko Borojevic	View Answer on Stackoverflow