我可以使用 HTML 输入类型 "date" 只收集一年吗？

Question

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

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

如果没有平台支持，理想情况下我希望有一个 UI 类似的东西 see here 如果你点击 "Preview" 然后点击小部件的顶部几次，但反过来除外：当你第一次点击输入时，你会得到一个包含几十年列表的小部件，然后你向下钻取以选择年份，然后 UI 关闭。

Answer 1

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

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

Javascript

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

CSS

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

来源：

来源 fiddle: http://jsfiddle.net/vW8zc/

这是 an updated fiddle，没有月份和 prev/next 按钮

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

Answer 2

我试试这个，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

Answer 3

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

示例：

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

Answer 4

input type month in HTML5 允许 select 月和年。月份 select 或使用自动完成功能。

查看JSFiddle中的示例。

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

Answer 5

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

Answer 6

您可以执行以下操作：

生成我将接受的年份数组，
使用 select 盒子。
使用数组中的每一项作为 'option' 标签。

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

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

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

我可以使用 HTML 输入类型 "date" 只收集一年吗？

Can I use an HTML input type "date" to collect only a year?

html

forms

date

webshim