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

Question

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

293.1k views Asked by Guss At 08 January 2016 at 12:05

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.

Original Q&A

There are 7 answers

Johan Morales On 17 November 2016 at 17:47

I try with this, no modifications on the css.

$(function() {
  $('#datepicker').datepicker({
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'yy',
    onClose: function(dateText, inst) {
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, 1));
    }
  });

  $("#datepicker").focus(function() {
    $(".ui-datepicker-month").hide();
    $(".ui-datepicker-calendar").hide();
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="datepicker" /></p>

Example code jsfiddle

Blackbam On 17 November 2016 at 18:10

No you can not, but input type number provides exactly the functionality you need for this purpose.

Example:

<input type="number" min="1900" max="2099" step="1" value="2016" />

Wallkicker On 08 December 2017 at 14:55

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>

Zlatko Borojevic On 18 May 2018 at 12:19

 <!--This yearpicker development from Zlatko Borojevic
 html elemnts can generate with java function
    and then declare as custom type for easy use in all html documents 
 For this version for implementacion in your document can use:
 1. Save this code for example: "yearonly.html"
 2. creaate one div with id="yearonly"
 3. Include year picker with function: $("#yearonly").load("yearonly.html"); 
 
 <div id="yearonly"></div>
 <script>
 $("#yearonly").load("yearonly.html"); 
 </script>
 -->

 
 
 <!DOCTYPE html>
 <meta name="viewport" content="text-align:center; width=device-width, initial-scale=1.0">
 <html>
 <body>
 <style>
 .ydiv {
 border:solid 1px;
 width:200px;
 //height:150px;
 background-color:#D8D8D8;
 display:none;
 position:absolute;
 top:40px;
 }

 .ybutton {

    border: none;
    width:35px;
 height:35px;
    background-color:#D8D8D8;
 font-size:100%;
 }

 .yhr {
 background-color:black;
 color:black;
 height:1px">
 }

 .ytext {
 border:none;
 text-align:center;
 width:118px;
 font-size:100%;
 background-color:#D8D8D8;
 font-weight:bold;

 }
 </style>
 <p>
 <!-- input text for display result of yearpicker -->
 <input type = "text" id="yeardate"><button style="width:21px;height:21px"onclick="enabledisable()">V</button></p>

 <!-- yearpicker panel for change only year-->
 <div class="ydiv" id = "yearpicker">
 <button class="ybutton" style="font-weight:bold;"onclick="changedecade('back')"><</button>

 <input class ="ytext" id="dec"  type="text" value ="2018" >
 
 <button class="ybutton" style="font-weight:bold;" onclick="changedecade('next')">></button>
 <hr></hr>



    <!-- subpanel with one year 0-9 -->
 <button  class="ybutton"  onclick="yearone = 0;setyear()">0</button>
 <button  class="ybutton"  onclick="yearone = 1;setyear()">1</button>
 <button  class="ybutton"  onclick="yearone = 2;setyear()">2</button>
 <button  class="ybutton"  onclick="yearone = 3;setyear()">3</button>
 <button  class="ybutton"  onclick="yearone = 4;setyear()">4</button><br>
 <button  class="ybutton"  onclick="yearone = 5;setyear()">5</button>
 <button  class="ybutton"  onclick="yearone = 6;setyear()">6</button>
 <button  class="ybutton"  onclick="yearone = 7;setyear()">7</button>
 <button  class="ybutton"  onclick="yearone = 8;setyear()">8</button>
 <button  class="ybutton"  onclick="yearone = 9;setyear()">9</button>
 </div>
    <!-- end year panel -->



 <script>
 var date = new Date();
 var year = date.getFullYear(); //get current year
 //document.getElementById("yeardate").value = year;// can rem if filing text from database

 var yearone = 0;
 
 function changedecade(val1){ //change decade for year

 var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
 if (val1 == "next"){
 document.getElementById('dec').value = x + 10;
 }else{
 document.getElementById('dec').value = x - 10;
 }
 }
 
 function setyear(){ //set full year as sum decade and one year in decade
 var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
    var y = parseFloat(yearone);

 var suma = x + y;
    var d = new Date();
    d.setFullYear(suma);
 var year = d.getFullYear();
 document.getElementById("dec").value = year;
 document.getElementById("yeardate").value = year;
 document.getElementById("yearpicker").style.display = "none";
 yearone = 0;
 }
 
 function enabledisable(){ //enable/disable year panel
 if (document.getElementById("yearpicker").style.display == "block"){
 document.getElementById("yearpicker").style.display = "none";}else{
 document.getElementById("yearpicker").style.display = "block";
 }
 
 }
 </script>
 </body>
 </html>

David Lartey On 27 June 2018 at 13:22

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 ;-)

Micolay On 12 January 2019 at 19:13

Add the following code to your page:

<?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 reversed as follows:

<?php
    echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
    for ($year = date('Y'); $year >= 1900; $year--) { // Reverse loop, change ++ to --
      echo '<option value="'.$year.'">' . $year . '</option>';
    }
?>

With this you are good to go.

**Asons** · Accepted Answer · 2016-01-08T12:47:15+00:00

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.

TechQA.

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

There are 7 answers

Related Questions in HTML

Related Questions in FORMS

Related Questions in DATE

Related Questions in WEBSHIM

Popular Questions

Trending Questions