58

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.

Guss
  • 30,470
  • 17
  • 104
  • 128
  • 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. – Asons Jan 08 '16 at 12:17
  • Check this post for a few good jQuery sample: http://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year-only – Asons Jan 08 '16 at 12:25
  • Which likely makes this question a duplicate of: http://stackoverflow.com/questions/30085591/focus-month-or-year-of-html5-inputtype-date ... Do you agree? ... and if jQuery is an option, my first comment's link would be the dupe? – Asons Jan 08 '16 at 12:27
  • I don't think its a dup, though it is simiar. As for the jQuery, I'm not using jquery-ui, but if its a solution I'd probably do that. If you post this as an answer, I might approve it :-) – Guss Jan 08 '16 at 12:34

7 Answers7

119

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" />
Blackbam
  • 17,496
  • 26
  • 97
  • 150
23

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.

node_modules
  • 4,790
  • 6
  • 21
  • 37
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Looking at the resulting interface, its kind of horrible (for a year picker anyway). The only action that you can do is to page through months - which will eventually will get you to a specific year, but if I'm asking a user what his birth year is, it will 12 times more clicks than I would have liked. A UI like webshims' date picker's "view 0" is much more preferable (though I couldn't figure out how to terminate the webshims UI once the user selects a year). Currently my other solution is a drop down with all years since 1900 with values set to the "1-1-YYYY", so I need to beat this UI. – Guss Jan 08 '16 at 13:03
  • 1
    @Guss And here is one without the prev/next arrows as well: http://jsfiddle.net/vW8zc/307/ ... if any is good enough, let me know and I update my answer – Asons Jan 08 '16 at 13:23
  • I can't say its better than a straight up drop-down (I've added some description in the question about what kind of UI I was looking for) but I'll accept that as then answer, if nobody comes up with something much better in the next couple of days. Thanks! – Guss Jan 08 '16 at 13:23
  • @Guss You're welcome! ... and updated my answer with adding the latest fiddle version. – Asons Jan 08 '16 at 13:26
  • @Guss Found the layout you want in bootstrap's datepicker. Updated my answer with a link to their page/headline. – Asons Jan 08 '16 at 13:39
  • fancy :-) I don't have bootstrap integrated, and it looks like it might be some heavy lifting, but it definitely looks like a better solution then a simple drop down. Thanks! – Guss Jan 08 '16 at 13:53
13

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>
Guss
  • 30,470
  • 17
  • 104
  • 128
Wallkicker
  • 139
  • 1
  • 2
  • 1
    Thanks for the answer, I wasn't aware of `type=month` being an option in HTML5 (I've added a link to the spec). Github doesn't offer "blame view" for large files so I can't figure out when it was added. That being said it is not a good enough solution for my needs, but it did inspire me to open an issue on the standard to add "year" type as well: https://github.com/whatwg/html/issues/3281 . If you are also interested in such a feature (to be available in browsers in the next 5 years ;-) ), please vote up. – Guss Dec 10 '17 at 09:33
  • Also input type=week is available which was quite surprising for me. But there is no input type=year. – Blackbam Aug 23 '18 at 13:14
  • 8
    input type='month' isn't supported by Firefox and Safari: https://www.w3schools.com/tags/att_input_type_month.asp – huuthang Oct 25 '18 at 03:17
11

You can do the following:

  1. Generate an Array of the years I'll be accepting,
  2. Use a select box.
  3. 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 ;-)

David Lartey
  • 531
  • 8
  • 15
  • These select boxes are a pain on mobile (iOS at least) because you can't enter (search for) an option with the keyboard. – tobiv Jan 24 '22 at 12:28
1

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

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Johan Morales
  • 149
  • 1
  • 7
1

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.

Gerrit Bertier
  • 4,101
  • 2
  • 20
  • 36
Micolay
  • 11
  • 1
0

 <!--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>
Zlatko Borojevic
  • 1
  • 1