html5 日期选择

311 阅读1分钟

一般在html中都会采用一些第三方日期插件来进行使用,其实要求不高的情况下可以使用Html5中自带的日期组件进行使用,本文主要通过代码形式进行介绍。

<html>
<head>
    <meta charset="UTF-8"/>
    <title>日期选择</title>
</head>
<body>
<!-- 选择年月日-->
年月日:<input name="birthday" type="date">
<p/>
<!-- 选择年月日 时分-->
年月日 时分:<input name="birthday" type="datetime-local">
<p/>
<!-- 选择年月日 时分秒-->
年月日 时分秒: <input type="datetime-local" step="01"/>
</body>
</html>

对应显示的界面:

image.png

年月日对应的选择器:

QQ截图20240711165355.png

年月日 时分对应的选择器:

QQ截图20240711165406.png

年月日 时分秒对应的选择器:

QQ截图20240711165415.png