我可以使用 HTML 输入类型“日期”来仅收集一年吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34676752/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use an HTML input type "date" to collect only a year?
提问by Guss
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 webshimsbecause 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?
我想使用现代浏览器或webshims支持的日期输入 UI，因为它很好并且在现代平台上运行良好。我不知道如何让 UI 只显示年份。有任何想法吗？
If there is no platform support, ideally I would like to have a UI something like you can see hereif 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.
如果没有平台支持，理想情况下，如果您单击“预览”然后单击小部件的顶部几次，我希望有一个类似于您可以在此处看到的 UI ，相反的情况除外：当您第一次单击输入时你会得到一个包含几十年列表的小部件，然后你深入选择年份，然后 UI 关闭。
采纳答案by Ason
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.
不，你不能，它不只支持年份，所以你需要一个脚本，比如 jQuery 或你拥有的 webshim 链接，它只显示年份。
If jQuery would be an option, here is one, borrowed from Sibu:
如果 jQuery 是一种选择，这里有一个，从诗巫借来的：
Javascript
Javascript
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy'});
});?
CSS
CSS
.ui-datepicker-calendar {
display: none;
}
Src: https://stackoverflow.com/a/13528855/2827823
源代码：https: //stackoverflow.com/a/13528855/2827823
Src fiddle: http://jsfiddle.net/vW8zc/
src小提琴：http: //jsfiddle.net/vW8zc/
Here is an updated fiddle, without the month and prev/next buttons
这是一个更新的小提琴，没有月份和上一个/下一个按钮
If bootstrapis an option, check this link, they have a layout how you want.
如果引导程序是一个选项，请检查此链接，他们有您想要的布局。
回答by Blackbam
No you can not but you may want to use input type number as a workaround. Look at the following example:
不，您不能，但您可能希望使用输入类型编号作为解决方法。看下面的例子：
<input type="number" min="1900" max="2099" step="1" value="2016" />
回答by Wallkicker
There is input type month in HTML5which allows to select month and year. Month selector works with autocomplete.
HTML5 中有输入类型月份，允许选择月份和年份。月份选择器与自动完成功能配合使用。
Check the example in JSFiddle.
检查JSFiddle 中的示例。
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Select a month below</h1>
</header>
Month example
<input type="month" />
</body>
</html>
回答by Johan Morales
I try with this, no modifications on the css.
我尝试这样做，对 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>回答by David Lartey
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.
- 生成一个我将接受的年份数组，
- 使用选择框。
- 将 Array 中的每个项目用作“选项”标签。
Example using PHP (you can do this in any language of your choice):
使用 PHP 的示例（您可以使用您选择的任何语言执行此操作）：
Server:
服务器：
<?php $years = range(1900, strftime("%Y", time())); ?>
HTML
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 works has a browser compatibility of a 100% ;-)
作为一个额外的好处，这个作品具有 100% 的浏览器兼容性;-)
回答by Micolay
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.
有了这个，你就可以开始了。
回答by Zlatko Borojevic
<!--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>