HTML 中的日期-html教程-PHP中文网

Html 中日期的特点

输入字段

最小和最大属性

日期选择器

HTML 中的日期示例

示例 #3

结论

首页

web前端

html教程

HTML 中的日期

王林

Sep 04, 2024 pm 04:45 PM

html html5 HTML Tutorial HTML Properties HTML tags

我们可以通过 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 没有向任何供应商指定如何在屏幕上实现用户输入。我们可以使用用于使用其任何属性在浏览器中声明名称的标签；我们可以以最小和最大格式属性（例如 min 和 max）指定日期值，但用户应该知道范围内特定于日期的值。

此外，我们可能会包含诸如步进格式之类的属性来验证日期如何递增。默认值为 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 等的库时，这些格式基于用户的要求。库同时使用用户端（前端）和后端目的。