HTML DOM 输入日期对象

htmlweb developmentfront end technology更新于 2025/6/14 17:48:17

HTML DOM 输入日期对象表示一个 date 类型的 HTML 输入元素。

语法

以下是语法 −

创建 date 类型的 <input>

var dateObject = document.createElement(“input”);
dateObject.type = “date”;

属性

其中，“dateObject” 可以具有以下属性 −

属性	描述
autocomplete	定义日期字段 autocomplete 属性的值
autofocus	定义日期字段是否在初始页面加载时获得焦点。
defaultValue	设置/返回日期字段的默认值
disabled	定义日期字段是否禁用/启用
form	返回包含日期字段的封闭表单的引用
max	返回/设置日期 max 属性的值field
min	返回/设置日期字段 min 属性的值
name	定义日期字段 name 属性的值
readOnly	定义日期字段是否只读
required	定义日期字段是否必须填写才能提交表单
step	定义日期字段 step 属性的值
type	返回日期字段的表单元素类型
value	定义日期字段 value 属性的值

布尔值值

此外，还有以下方法 −

booleanValue	描述
stepDown	定义日期字段应增加的天数。
stepUp	定义日期字段应增加的天数。

示例

让我们看一个 Input Date max属性的示例 −

<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
Date Select: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">Change Max Date</button>
<div id="divDisplay"></div>
<script>
   var inputDate = document.getElementById("date");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Max of date input: '+inputDate.max;
   function getMaxDate() {
      var oldInputDate = inputDate.max;
      inputDate.max = '2020-12-31';
      divDisplay.textContent = 'Max of date input: '+inputDate.max;
   }
</script>
</body>
</html>