HTML DOM Input Date用法及代码示例

Input Date对象用于表示类型为“ date”的HTML <input>元素。输入日期对象是HTML5中的新对象。

用法:

要创建类型为“ date”的<input>元素：

var gfg = document.createElement("input") 
gfg.setAttribute("type", "date");

要访问类型为“ date”的<input>元素：
```
document.getElementById("date_object")
```

属性值：

值	描述
autocomplete	它用于设置或返回日期时间字段的自动完成属性的值。
autofocus	它用于设置或返回在页面加载时datetime字段是否应自动获得焦点。
defaultValue	它用于设置或返回日期时间字段的默认值。
disabled	它用于设置或返回是否禁用了日期时间字段。
form	它用于返回对包含datetime字段的表单的引用。
list	它用于返回对包含datetime字段的数据列表的引用。
max	它用于设置或返回datetime字段的max属性值。
min	设置或返回datetime字段的min属性的值。
name	它用于设置或返回日期时间字段的名称属性的值。
readOnly	它用于设置或返回datetime字段是否为只读。
required	它用于设置或返回在提交表单之前是否必须填写datetime字段。
step	它用于设置或返回datetime字段的step属性的值。
type	它用于返回datetime字段是哪种类型的表单元素。
value	它用于设置或返回日期时间字段的value属性的值。

输入日期对象方法：

stepDown()：它用于将datetime字段的值递减指定的数字。
stepUp()：它用于将datetime字段的值增加指定的数字。

以下示例程序旨在说明Date对象：
示例1：创建一个类型为“ date”的<input>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Input Date Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Input Date Object</h2> 
  
    <p>Double Click the "Create" button  
      to create a Date field. 
  </p> 
  
    <button ondblclick="Create()">Create 
  </button> 
  
    <script> 
        function Create() { 
            
         // create input element type date. 
         var c = document.createElement("INPUT"); 
         c.setAttribute("type", "date"); 
         c.setAttribute("value", "2019-07-02T25:32Z"); 
         document.body.appendChild(c); 
        } 
    </script> 
  
</body> 
  
</html>

输出：

在单击按钮之前：

单击按钮后：

示例2：访问类型=“ date”的<input>元素。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Input Date Object</title> 
    <style> 
        h1 { 
            color:green; 
        } 
          
        h2 { 
            font-family:Impact; 
        } 
          
        body { 
            text-align:center; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
    <h2>Input Date Object</h2> 
  
    <input type="date" 
           id="test" 
           value="2019-07-02T25:32Z"> 
  
    <p>Double Click the "Access"  
      button to access a Date field.</p> 
  
    <button ondblclick="Access()">Access 
  </button> 
  
    <p id="check"></p> 
  
    <script> 
        function Access() { 
            
            // Accessing input element type =”date” 
            var a = document.getElementById( 
              "test").value; 
            document.getElementById( 
              "check").innerHTML = a; 
        } 
    </script> 
  
</body> 
  
</html>

输出：

单击按钮后

支持的浏览器：

Opera
Firefox
谷歌浏览器
苹果Safari

相关用法

注：本文由纯净天空筛选整理自Shubrodeep Banerjee大神的英文原创作品 HTML | DOM Input Date Object。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。