Search code examples
htmlformsdatewebshim

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.

Solution

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