Guss Guss - 4 months ago 24
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

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'});
    });‚Äč
CSS

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

Src: http://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.

Comments