Guss Guss - 1 year ago 244
HTML Question

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

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.

Answer Source

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:

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

.ui-datepicker-calendar {
   display: none;


Src fiddle:

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download