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

Question

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.

User · Answer

x000D   x000D    lt  --This yearpicker development from Zlatko Borojevic x000D   html elemnts can generate with java function x000D      and then declare as custom type for easy use in all html documents  x000D   For this version for implementacion in your document can use  x000D   1  Save this code for example   yearonly html  x000D   2  creaate one div with id  yearonly  x000D   3  Include year picker with function      yearonly   load  yearonly html     x000D    x000D    lt div id  yearonly  gt  lt  div gt  x000D    lt script gt  x000D       yearonly   load  yearonly html     x000D    lt  script gt  x000D   -- gt  x000D   x000D    x000D    x000D    lt  DOCTYPE html gt  x000D    lt meta name  viewport  content  text-align center  width device-width  initial-scale 1 0  gt  x000D    lt html gt  x000D    lt body gt  x000D    lt style gt  x000D    ydiv   x000D   border solid 1px  x000D   width 200px  x000D     height 150px  x000D   background-color  D8D8D8  x000D   display none  x000D   position absolute  x000D   top 40px  x000D     x000D   x000D    ybutton   x000D   x000D      border  none  x000D      width 35px  x000D   height 35px  x000D      background-color  D8D8D8  x000D   font-size 100   x000D     x000D   x000D    yhr   x000D   background-color black  x000D   color black  x000D   height 1px  gt  x000D     x000D   x000D    ytext   x000D   border none  x000D   text-align center  x000D   width 118px  x000D   font-size 100   x000D   background-color  D8D8D8  x000D   font-weight bold  x000D   x000D     x000D    lt  style gt  x000D    lt p gt  x000D    lt  -- input text for display result of yearpicker -- gt  x000D    lt input type    text  id  yeardate  gt  lt button style  width 21px height 21px onclick  enabledisable    gt V lt  button gt  lt  p gt  x000D   x000D    lt  -- yearpicker panel for change only year-- gt  x000D    lt div class  ydiv  id    yearpicker  gt  x000D    lt button class  ybutton  style  font-weight bold  onclick  changedecade  back    gt  lt  lt  button gt  x000D   x000D    lt input class   ytext  id  dec   type  text  value   2018   gt  x000D    x000D    lt button class  ybutton  style  font-weight bold   onclick  changedecade  next    gt  gt  lt  button gt  x000D    lt hr gt  lt  hr gt  x000D   x000D   x000D   x000D       lt  -- subpanel with one year 0-9 -- gt  x000D    lt button  class  ybutton   onclick  yearone   0 setyear    gt 0 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   1 setyear    gt 1 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   2 setyear    gt 2 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   3 setyear    gt 3 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   4 setyear    gt 4 lt  button gt  lt br gt  x000D    lt button  class  ybutton   onclick  yearone   5 setyear    gt 5 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   6 setyear    gt 6 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   7 setyear    gt 7 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   8 setyear    gt 8 lt  button gt  x000D    lt button  class  ybutton   onclick  yearone   9 setyear    gt 9 lt  button gt  x000D    lt  div gt  x000D       lt  -- end year panel -- gt  x000D   x000D   x000D   x000D    lt script gt  x000D   var date   new Date    x000D   var year   date getFullYear      get current year x000D     document getElementById  yeardate   value   year    can rem if filing text from database x000D   x000D   var yearone   0  x000D    x000D   function changedecade val1     change decade for year x000D   x000D   var x   parseInt document getElementById  dec   value substring 0 3   0    x000D   if  val1     next    x000D   document getElementById  dec   value   x   10  x000D    else  x000D   document getElementById  dec   value   x - 10  x000D     x000D     x000D    x000D   function setyear      set full year as sum decade and one year in decade x000D   var x   parseInt document getElementById  dec   value substring 0 3   0    x000D      var y   parseFloat yearone   x000D   x000D   var suma   x   y  x000D      var d   new Date    x000D      d setFullYear suma   x000D   var year   d getFullYear    x000D   document getElementById  dec   value   year  x000D   document getElementById  yeardate   value   year  x000D   document getElementById  yearpicker   style display    none   x000D   yearone   0  x000D     x000D    x000D   function enabledisable      enable disable year panel x000D   if  document getElementById  yearpicker   style display     block    x000D   document getElementById  yearpicker   style display    none   else  x000D   document getElementById  yearpicker   style display    block   x000D     x000D    x000D     x000D    lt  script gt  x000D    lt  body gt  x000D    lt  html gt  x000D   x000D   x000D

User · Answer

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    lt  php  years   range 1900  strftime   Y   time        gt    HTML   lt select gt     lt option gt Select Year lt  option gt     lt  php foreach  years as  year      gt       lt option value   lt  php echo  year    gt   gt  lt  php echo  year    gt  lt  option gt     lt  php endforeach    gt   lt  select gt    As an added benefit  this works has a browser compatibility of a 100   -

User · Answer

I try with this  no modifications on the css    x000D   x000D    function     x000D        datepicker   datepicker   x000D      changeYear  true  x000D      showButtonPanel  true  x000D      dateFormat   yy   x000D      onClose  function dateText  inst    x000D        var year       ui-datepicker-div  ui-datepicker-year  selected   val    x000D          this  datepicker  setDate   new Date year  1    x000D        x000D        x000D   x000D        datepicker   focus function     x000D          ui-datepicker-month   hide    x000D          ui-datepicker-calendar   hide    x000D        x000D   x000D      x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   code jquery com ui 1 12 1 jquery-ui min js  gt  lt  script gt  x000D   lt p gt Date   lt input type  text  id  datepicker    gt  lt  p gt  x000D   x000D   x000D    Example code jsfiddle

User · Answer

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>

User · 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   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

User · Answer

No you can not but you may want to use input type number as a workaround  Look at the following example    lt input type  number  min  1900  max  2099  step  1  value  2016    gt

User · Answer

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.

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

The answer is

Examples related to html

Examples related to forms

Examples related to date

Examples related to webshim

Tags