如何在 HTML 中使用年份输入类型?
使用 placeholder 属性告知用户所需的输入格式为 YYYY,以及 <input type="number">、min 和 max 属性来限制可能性范围。在 input 事件期间,将 value 或 valueAsNumber 传递给新 Date 的第一个参数()
以下是示例…
示例
在下例中,我们使用 placeholder 来告知输入类型为年份。
<!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。它与文本输入类型一起使用。运行程序后,只会显示年份。
你可以尝试运行以下代码,了解如何使用 input 类型设置年份 -
<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>
输出
执行以上脚本后,它将生成一个使用 datepicker JQuery 添加的文本输入年份类型。
广告
数据结构
网络
RDBMS
操作系统
Java
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP