52

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

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

如果没有平台支持，理想情况下，如果您单击“预览”，然后单击小部件的顶部几次，理想情况下我希望有一个类似于您可以在此处看到的 UI，相反的情况除外：当您第一次单击输入时你会得到一个包含几十年列表的小部件，然后向下钻取以选择年份，然后 UI 关闭。

4

7 回答 7

100

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

<input type="number" min="1900" max="2099" step="1" value="2016" />
于 2016-11-17T18:10:33.753 回答
23

不，你不能，它不只支持年份，所以你需要一个脚本，比如 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/

这是一个更新的小提琴，没​​有月份和上一个/下一个按钮

如果bootstrap是一个选项，请检查此链接，它们有您想要的布局。

于 2016-01-08T12:47:15.977 回答
11

HTML5 中有输入类型月份，它允许选择月份和年份。月份选择器适用于自动完成。

检查JSFiddle中的示例。

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Select a month below</h1>
    </header>
    Month example
    <input type="month" />
</body>
</html>
于 2017-12-08T14:55:26.903 回答
10

您可以执行以下操作：

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

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

于 2018-06-27T13:22:15.923 回答
1

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

<?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>';
}
?>

有了这个，你就可以走了。

于 2019-01-12T19:13:34.270 回答
1

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

示例代码 jsfiddle

于 2016-11-17T17:47:31.347 回答
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>

于 2018-05-18T12:19:59.797 回答