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

Solution 1:

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:

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:

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:

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:

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. 😉