首页 > web前端 > html教程 > HTML 中的日期

HTML 中的日期

王林
发布: 2024-09-04 16:45:13
原创
697 人浏览过

我们可以通过 Web 表单在 HTML 中快速查找一些字段,例如时间和日期字段。我们已经在在线订票、订单预订等预订系统中使用了这些字段。大多数情况下,我们在一些脚本语言(例如使用日期选择器功能的 javascript)中使用了“日期”等常见字段。主要用于日历在文本框列中选择日期。在html5中,我们选择了一些完全支持用户浏览器屏幕的指定浏览器,例如Opera和google chrome版本。有时,包含有效日期和时间格式的列的文本框会适当识别 html5 版本。

语法:

我们有一些遵循 HTML dtd 模型的语法,以便网页能够根据用户要求正确显示。

<html>
<body>
<input type="date" id="1" name="first" value="yyyy-month-date">
-----some codes---
</body>
</html>
登录后复制

以上代码是网页中带有日期格式字段的基本HTML代码。标签是 HTML 中的标签之一,用于创建输入字段,例如用户输入或网页的自定义输入。

Html 中日期的特点

日期输入类型为表单元素;它允许用户使用日期选择器实现从用户屏幕捕获数据。使用日期选择器取决于供应商,就像浏览器一样,但是 html5 没有向任何供应商指定如何在屏幕上实现用户输入。我们可以使用

此外,我们可能会包含诸如步进格式之类的属性来验证日期如何递增。默认值为 1。我们还可以验证浏览器对日期输入类型的支持。同样,HTML 对每个标签和属性都有一些特性;某些日期对于 HTML 中的输入类型有一些功能。

输入字段

Firefox 和 Safari 浏览器支持纯文本输入类型,没有独特的格式或特殊的交互。在 Microsoft 中,即使输入字段在用户浏览器屏幕中显示为只读格式,边缘浏览器也没有特殊功能或交互。与 Chrome 和 Opera 一样,其他浏览器可能具有类似的实现,其中根据用户的浏览器或系统设置显示日期占位符值。这可以包括与日期格式和其他系统配置相关的设置。

应用程序通常会为用户设置一些控件,以允许清晰的输入文本字段和一些其他格式(例如箭头)在值之间上下循环并使用将被拾取的箭头;还有一些其他 Web 引擎,例如“WebKit 前缀伪选择器”工具,用于允许更改浏览器屏幕中出现的视图。

最小和最大属性

所有浏览器都支持使用最小和最大属性的输入类型,例如日期。使用Chrome和Opera浏览器时,支持启用的属性集。然而,如果用户只为一项属性设置值,则前端屏幕可能无法正确显示。这些浏览器将支持日期输入类型,通过使用向上和向下箭头来更改使用 d-m-year 等格式的文本框中的值。

如果用户突出显示年份一侧的光标并单击向下箭头,年份将自动更改为列表框中箭头循环中显示的值列表。要求有效值,未设置最大值;将使用默认值。列表框中显示的最大最大值相同;当我们使用 Android 等移动应用程序时,它会更改日期选择器中的值。

日期选择器

它是HTML中必不可少的输入类型之一;它会给用户输入日期格式。即使我们使用像Chrome和Opera这样的浏览器来满足用户桌面上的日期选择器条件,像CSS这样的样式也不能满足条件。在网页上看起来很正常;在文档中使用一些 CSS 样式元素将根据用户感知来对齐和设计视图。我们还可以禁用用户浏览器中的日期选择器;如果我们想启用和实施我们自己的,我们将在网络上进行,但移动设备的访问将受到一些限制。

HTML 中的日期示例

以下是 HTML 中日期的不同示例。

示例#1

代码:

<html>
<body>
<form action="sample.html">
Dates: <input type="date" name="first">
<input type="submit">
</form>
</body>
</html>
登录后复制

输出:

HTML 中的日期

示例#2

代码:

<html>
<head>
<style>
sample {
display: block;
font: 3rem;
}
sample2 {
margin: .7rem 2;
}
</style>
</head>
<body>
<div class="sample">
<label for="first">dates:</label>
<input type="date" id="names" name="first"
value="2020-02-26"
min="2020-01-01" max="2020-12-31">
</div>
</body>
</html>
登录后复制

输出:

HTML 中的日期

示例 #3

代码:

<html>
<body>
<p id="sample"></p>
<script>
var dates = new Date();
document.getElementById("sample").innerHTML = dates;
</script>
</body>
</html>
登录后复制

输出:

HTML 中的日期

前两个示例将使用标签和文本框在网页上显示日期内容最后一个示例将使用 javascript 函数自动调用截止日期的日期函数;如果我们在函数中使用其他样式,我们用它来突出显示网页,我们将在以下任一中使用日期函数作为 mm-dd-yy 或 dd-mm-yy 或 yy-mm-dd 或 yy-dd-mm当我们使用其他一些名为 jquery 等的库时,这些格式基于用户的要求。库同时使用用户端(前端)和后端目的。

结论

开发人员在使用 HTML 时使用“日期”类型来创建自定义输入元素。此功能允许用户通过文本框或“日期选择器”功能输入日期。使用文本框时,开发人员必须验证日期格式并确保浏览器兼容性。然而,日期选择器功能不需要验证,可以轻松集成到 HTML 代码中。

以上是HTML 中的日期的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板