如何在 HTML 中使用年份输入类型?

htmlweb developmentfront end technology更新于 2025/4/10 6:04:17

使用占位符属性告知用户所需的输入格式为 YYYY，并使用 <input type="number">、min 和 max 属性限制输入范围。在输入事件 () 期间，将值或 valueAsNumber 传递给新日期的第一个参数。

以下是示例……

示例

在下面的示例中，我们使用占位符来表明输入类型为年份。


<!DOCTYPE html>
<html>
<body>
   <input type="number" placeholder="YYYY" min="1999" max="2020">
   <script>
      document.querySelector("input[type=number]")
      .oninput = e => console.log(new Date(e.target.valueAsNumber, 0, 1))
   </script>
</body>
</html>

输出

执行上述脚本后，将生成一个使用占位符添加年份的输入类型。

示例:使用 JQuery datepicker 标签

要使用年份输入类型，我们将使用 jQuery 添加 datepicker。它与文本输入类型一起使用。运行程序时，只有年份可见。

您可以尝试运行以下代码，了解如何使用输入类型设置年份 -


<html>
<head>
   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
   <script type="text/javascript">
      $(function() {
         $( "#date" ).datepicker({dateFormat: 'yy'});
      });
   </script>
</head>
<body>
   <form action = "" method = "get">
      Details:<br> <br>
      Student Name <br> <input type="name" name="sname"> <br>
      Year of Birth <br> <input type="text" id="date"> <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>