我有一个字段需要从用户那里收集年份（即具有年份分辨率的日期 - 为了便于存储，我更愿意存储实际的日期值而不是数字）。
我想使用现代浏览器支持的日期输入 UI 或 webshims，因为它很好并且可以在现代平台上运行良好。我不知道如何让用户界面仅显示年份。有什么想法吗？
如果没有平台支持，理想情况下我希望有一个像您可以参见此处的用户界面，如果您单击“预览”，然后单击小部件的顶部几次，除非相反：当您第一次时单击输入，您将获得一个包含几十年列表的小部件，然后向下钻取以选择年份，然后用户界面关闭。
不，您不能，但输入类型
number示例：
<input type="number" min="1900" max="2099" step="1" value="2016" />不，你不能，它不支持仅年份，所以要做到这一点，你需要一个脚本，比如 jQuery 或你拥有的 webshim 链接，它只显示年份。
如果 jQuery 是一种选择，这里有一个，借自 Sibu:
Javascript
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy'});
});
CSS
.ui-datepicker-calendar {
display: none;
}
来源：https://stackoverflow.com/a/13528855/2827823
源小提琴：http://jsfiddle.net/vW8zc/
这是更新的小提琴，没有月份和上一个/下一个按钮
如果 bootstrap 是一个选项，检查此链接，他们有您想要的布局。
您可以执行以下操作：
使用 PHP 的示例（您可以使用您选择的任何语言执行此操作）：
服务器：
<?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>
还有一个额外的好处，它具有 100% 的浏览器兼容性;-)
我尝试了这个，没有修改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>将以下代码添加到您的页面：
<?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>';
}
?>
它工作完美，可以按如下方式反转：
<?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>';
}
?>
有了这个你就可以开始了。
<!--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>