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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。