HTML 日期

14 Apr 2025 | 5 分钟阅读

日期是<input>元素type属性的值。它会创建一个日历，允许用户选择日期。生成的值包括日、月和年。HTML日期用于设置日期及其最小和最大日期限制。我们可以从日历中选择日期，并根据日、月和年设置日期。

基本 HTML 日期

基本 HTML 日期用于在 input 标签中显示日历并显示日期。

语法

提供的语法显示了 HTML 标签中的日期类型。

示例

以下示例展示了表单中 HTML 的基本日期。

示例 1：以下示例描述了如何在<input>标签中使用日期

<!DOCTYPE html> 
<html>
<head> 
<title>
Example of Date Attribute
</title>
</head>
<body> 
<form> 
Employee Name: <input type="text" placeholder="Enter Your name" Required>
<br>
<br>
Date of Joining: <input type = "date"> 
<button type="submit" name="btn">Submit</button>
</form> 
</body>
</html>  

输出

以下输出显示了带有日历的 HTML 日期。

示例 2：以下示例使用 JavaScript 代码显示输入表单中的日期。

<!DOCTYPE html>
<html> 
<head> 
<title> Example of Date Attribute </title> 
<script> 
function viewdate() { 
var x = document.getElementById("dob").value; 
document.getElementById("demo").innerHTML = x; 
</script> 
</head> 
<body> 
Employee Name: <input type="text" placeholder="Your Good name"/> 
<br>
<br>
Date of Joining: 
<input type="date" id="dob">
<br> 
<button onclick="viewdate()"> Submit 
</button> 
<br>
<h2 id="demo"> </h2> 
</body> 
</html>

输出

HTML 日期（带必填或静态值）

该值可以显示 HTML 日期元素的静态日期。我们可以在 input 标签中看到静态日期值。

语法

以下语法显示了带有值的 HTML 日期。

或

描述

我们可以使用 value 作为日期的默认值。
我们可以使用 required 关键字来验证 HTML 日期。

示例

以下示例显示了带有 required 条件和静态值的基本日期。

示例 1

该示例显示了 HTML 日期日历中的静态值。我们可以看到带有选定日期的初始值的基本日期。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "id" value = "2000-02-22"> 
<button type = "submit" name = "btns"> Submit </button>
</form> 
</body> 
</html> 

输出

以下输出显示了日期函数。

示例 2

该示例显示了 HTML 日期日历中的静态值。我们可以使用 required 标签选择标签中的日期。如果我们尝试提交，错误标签会提示从属性中选择日期。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with a static value. </p>
Date of Joining: <input type = "date" id = "dates" name = "id" required> 
<button type = "submit" name = "btns"> Submit </button>
</form> 
</body> 
</html>   

输出

以下输出显示了日期函数。

HTML 日期（带最小和最大日期）

使用日期标签中的“min”属性，最小日期可以表示开始日期。使用日期标签中的“max”属性，最大日期可以表示结束日期。我们可以在 input date 标签中单独或一起使用 min 和 max 关键字。

语法

以下语法显示了带有值的 HTML 日期。

或

示例

示例显示了 HTML 日期及其日历的最小和最大日期验证。

示例 1

该示例显示了 HTML 日期日历中的最大日期值。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with maximum value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" max="2023-12-20"> 
<button type = "submit" name = "btns"> Submit </button>
</form> 
</body> 
</html>

输出

以下输出显示了日期函数。

示例 2

该示例显示了 HTML 日期日历中的开始和结束日期值。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" min="2023-11-21" max="2023-11-30"> 
<button type = "submit" name = "btns"> Submit </button>
</form> 
</body> 
</html>  

输出

以下输出显示了日期函数。

HTML 日期（带 Onclick 函数）

click 函数用于分别使用“min”和“max”属性表示开始日期和结束日期。onclick 函数用于 input date 或 button 标签。我们可以在单个日期或一起在 input date 标签中使用 min 和 max 关键字。

语法

以下语法显示了带有值的 HTML 日期。

<input type = "date" onclick = "document.getElementById('dates').min = '2023-12-22';">

或

<input type = "date" onclick = "getDate();">
<script>
function getDate(){
//Write script code!!!
}
</script>

示例

示例显示了使用 HTML 日期的 onclick 函数。我们可以使用 script 标签和 input 元素来实现不同的功能和事件。

示例 1

该示例显示了 HTML 日期日历中的必填开始值。我们可以通过 HTML 日期标签的 onclick 函数看到最小日期。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" onclick = "document.getElementById('dates').min = '2023-12-22';"> 
<button type = "submit" name = "btns"> Submit </button>
</form> 
</body> 
</html>

输出

以下输出显示了日期函数。

示例 2

该示例显示了 HTML 日期日历中的必填开始和结束值。我们可以通过 HTML 日期标签的 onclick 函数看到最小和最大日期。

<!DOCTYPE html> 
<html> 
<head> 
<title>
Example of HTML Date Attribute
</title> 
</head> 
<body> 
<form> 
<h4>
Example of HTML Date Attribute
</h4> 
<p> We can see the date function in the html tag with static value</p>
Date of Joining: <input type = "date" id = "dates" name = "dates" onclick = "myDate();"> 
<button type = "submit" name = "btns"> Submit </button>
<script>
function myDate(){
document.getElementById('dates').min = '2023-11-22';
document.getElementById('dates').max = '2023-12-22';
}
</script>
</form> 
</body> 
</html>   

输出

以下输出显示了日期函数。

浏览器支持

元素	Chrome	IE	Firefox	Opera	Safari
<type="Date">	是的	是的	是的	是的	是的

结论

HTML 数据在表单和日期必填区域用于用户信息。对于注册表单以及学生或员工信息表单，这是必需的。

下一个主题HTML 表单 Action

HTML 日期

基本 HTML 日期

语法

示例

HTML 日期（带必填或静态值）

语法

描述

示例

HTML 日期（带最小和最大日期）

语法

示例

HTML 日期（带 Onclick 函数）

语法

示例

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 日期

基本 HTML 日期

语法

示例

HTML 日期（带必填或静态值）

语法

描述

示例

HTML 日期（带最小和最大日期）

语法

示例

HTML 日期（带 Onclick 函数）

语法

示例

浏览器支持

结论

相关帖子

在 HTML 中使用 JavaScript 构建计算器的不同方法

HTML Scope

HTML 表格固定列宽

HTML 日期选择器

HTML input type="number"

哪个内联属性用于指定样式

HTML 5 spellcheck 属性

如何在 HTML 中添加垂直线

HTML Tab 标签

HTML Maker

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器