代码之家 › 专栏 › 技术社区 › Guss

我可以使用HTML输入类型“date”只收集一年吗?

webshim date forms html

Guss · 技术社区 · 10 年前

我有一个字段需要从用户那里收集年份(即带有年份分辨率的日期-为了便于存储,我更希望存储实际日期值,而不是数字)。

我想使用现代浏览器或 webshims 因为它很好,与现代平台很好地配合。我想不出如何让UI只显示年份。有什么想法吗?

如果没有平台支持,理想情况下我希望有一个像你一样的UI see here 如果您单击“预览”,然后单击小部件的顶部几次,除非相反:当您第一次单击输入时,会得到一个包含数十年列表的小部件,然后向下搜索以选择年份,然后UI关闭。

7 回复 | 直到 9 年前

107

Blackbam 4 年前

不可以,但输入类型 number 提供了您为此目的所需的功能。

例子:

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

node_modules 7 年前

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

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

Java脚本

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

CSS公司

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

高级职员: https://stackoverflow.com/a/13528855/2827823

高级小提琴: http://jsfiddle.net/vW8zc/

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

如果 独自创立 是一个选项, check this link ,他们有你想要的布局。

Guss 8 年前

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

David Lartey Muneer 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%的浏览器兼容性;-)

Micolay 7 年前

将此代码结构添加到页面代码

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

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

mplungjan 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

Zlatko Borojevic 8 年前

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