我可以使用 HTML 输入类型“日期”来仅收集一年吗？答案

【问题标题】：Can I use an HTML input type "date" to collect only a year?我可以使用 HTML 输入类型“日期”来仅收集一年吗？
【发布时间】：2016-04-13 02:50:43
【问题描述】：

我有一个字段需要从用户那里收集一年（即具有年份分辨率的日期 - 为了便于存储，我更喜欢存储实际日期值而不是数字）。

我想使用现代浏览器或webshims 支持的日期输入用户界面，因为它很好，并且在现代平台上运行良好。我不知道如何让 UI 只显示年份。有什么想法吗？

如果没有平台支持，理想情况下，如果您单击“预览”然后单击小部件的顶部几次，我希望有一个类似于 see here 的 UI，除非相反：当您首先单击输入，您将获得一个包含十年列表的小部件，然后向下钻取以选择年份，然后 UI 关闭。

【问题讨论】：

不，你不能，它不只支持年份，所以你需要一个脚本，比如 jQuery 或者你有的 webshim 链接，它只显示年份。
查看这篇文章以获得一些好的 jQuery 示例：stackoverflow.com/questions/13528623/…
这很可能使这个问题重复：stackoverflow.com/questions/30085591/… ...你同意吗？ ...如果 jQuery 是一个选项，我的第一个评论链接将是骗子？
我不认为它是一个骗局，尽管它是相似的。至于 jQuery，我没有使用 jquery-ui，但如果它是一个解决方案，我可能会这样做。如果您将此作为答案发布，我可能会批准它:-)

标签： html forms date webshim

【解决方案1】：

不，您不能，但您可能希望使用输入类型编号作为解决方法。看下面的例子：

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

【讨论】：

【解决方案2】：

不，你不能，它不只支持年份，所以你需要一个脚本，比如 jQuery 或你拥有的 webshim 链接，它只显示年份。

如果 jQuery 是一个选项，这里有一个，借用自 Sibu:

Javascript

$(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy'});
});

CSS

.ui-datepicker-calendar {
   display: none;
}

源：https://stackoverflow.com/a/13528855/2827823

Src 小提琴：http://jsfiddle.net/vW8zc/

这里是an updated fiddle，没有月份和上一个/下一个按钮

如果 bootstrap 是一个选项，check this link，他们有你想要的布局。

【讨论】：

查看生成的界面，它有点可怕（无论如何选择一年）。您可以做的唯一操作是逐月翻页 - 这最终会让您进入特定年份，但如果我问用户他的出生年份是什么，点击次数将是我希望的 12 倍。像 webshims 的日期选择器的“视图 0”这样的 UI 更可取（尽管我不知道如何在用户选择一年后终止 webshims UI）。目前我的另一个解决方案是自 1900 年以来所有年份的下拉列表，其值设置为“1-1-YYYY”，所以我需要击败这个 UI。
@Guss 还有一个没有 prev/next 箭头的：jsfiddle.net/vW8zc/307 ...如果有足够好，请告诉我，我会更新我的答案
我不能说它比直接下拉更好（我在问题中添加了一些关于我正在寻找什么样的 UI 的描述）但我会接受那个回答，如果在接下来的几天里没有人想出更好的东西。谢谢！
@Guss 不客气！ ...并通过添加最新的小提琴版本更新了我的答案。
@Guss 在引导程序的日期选择器中找到了您想要的布局。用他们的页面/标题的链接更新了我的答案。

【解决方案3】：

input type month in HTML5 允许选择月份和年份。月份选择器适用于自动完成功能。

查看JSFiddle中的示例。

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Select a month below</h1>
    </header>
    Month example
    <input type="month" />
</body>
</html>

【讨论】：

感谢您的回答，我不知道type=month 是 HTML5 中的一个选项（我已经添加了规范的链接）。 Github 不为大文件提供“责备视图”，所以我不知道它是什么时候添加的。话虽这么说，这对我的需求来说不是一个足够好的解决方案，但它确实激发了我在标准上打开一个问题以添加“年份”类型：github.com/whatwg/html/issues/3281。如果您也对此类功能感兴趣（将在未来 5 年内在浏览器中提供 ;-)），请投票。
输入 type=week 也可用，这让我很惊讶。但是没有输入 type=year。
input type='month' 不受 Firefox 和 Safari 支持：w3schools.com/tags/att_input_type_month.asp

【解决方案4】：

您可以执行以下操作：

生成我将接受的年份数组，
使用选择框。
将阵列中的每个项目用作“选项”标签。

使用 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% 的浏览器兼容性；-)

【讨论】：

这些选择框在移动设备（至少是 iOS）上很麻烦，因为您无法使用键盘输入（搜索）选项。

【解决方案5】：

将此代码结构添加到您的页面代码中

<?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++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>

有了这个，你就可以开始了。 ?

【讨论】：

我没有使用 PHP。

【解决方案6】：

我尝试了这个，没有对 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

【讨论】：

JavaScript 解决方案不是这个问题的答案。

【解决方案7】：

	<!--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>

【讨论】：