อ็อบเจ็กต์ HTML DOM Input Datetime

อ็อบเจ็กต์ HTML DOM Input Datetime แทนองค์ประกอบ <input> ที่มี type เป็น datetime ในเอกสาร HTML อย่างไรก็ตาม บราวเซอร์ส่วนใหญ่ (ยกเว้น Safari) จะจัดการ type datetime เป็น text ธรรมดา

ไวยากรณ์ (Syntax)

การสร้าง <input> ด้วย type datetime

var datetimeObject = document.createElement("input");
datetimeObject.type = "datetime";

แอตทริบิวต์ (Attributes)

อ็อบเจ็กต์ datetimeObject สามารถมีแอตทริบิวต์ต่อไปนี้:

แอตทริบิวต์	คำอธิบาย
autocomplete	กำหนดค่าแอตทริบิวต์ autocomplete ของช่อง datetime
autofocus	กำหนดว่าช่อง datetime ควรโฟกัสเมื่อโหลดหน้าเว็บครั้งแรก
defaultValue	ตั้งค่า/ดึงค่าเริ่มต้นของช่อง datetime
disabled	กำหนดว่าช่อง datetime ถูกปิดใช้งานหรือเปิดใช้งาน
form	อ้างอิง/ตั้งค่าค่าแอตทริบิวต์ max ของช่อง datetime
min	ดึง/ตั้งค่าค่าแอตทริบิวต์ min ของช่อง datetime
name	กำหนดค่าแอตทริบิวต์ name ของช่อง datetime
readOnly	กำหนดว่าช่อง datetime เป็นแบบอ่านอย่างเดียวหรือไม่
required	กำหนดว่าช่อง datetime เป็นฟิลด์บังคับหรือไม่
step	กำหนดค่าแอตทริบิวต์ step ของช่อง datetime
type	คืนค่าชนิดขององค์ประกอบฟอร์มของช่อง datetime
value	กำหนดค่าแอตทริบิวต์ value ของช่อง datetime

เมธอด (Methods)

เมธอด	คำอธิบาย
stepDown()	ลดค่าของช่อง datetime ตามจำนวนที่ระบุ
stepUp()	เพิ่มค่าของช่อง datetime ตามจำนวนที่ระบุ

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้คุณสมบัติ min ของ Input Datetime:

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Min</title>
</head>
<body>
<form>
  Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2009-6-24T20:49Z" min="2008-12-31T23:59:59Z">
</form>
<button onclick="minDateDecrease()">Decrease min age bar</button>
<div id="divDisplay"></div>
<script>
  var inputDatetime = document.getElementById("dateTime");
  var divDisplay = document.getElementById("divDisplay");
  divDisplay.textContent = 'Minimum Age Bar: ' + inputDatetime.min;
  function minDateDecrease() {
    inputDatetime.min = '2010-12-31T23:59:59Z';
    divDisplay.textContent = 'Minimum Age Bar: ' + inputDatetime.min;
  }
</script>
</body>
</html>

ผลลัพธ์ (Output)

ก่อนคลิกปุ่ม: แสดงค่า min เริ่มต้น หลังคลิกปุ่ม Decrease min age bar: ค่า min จะเปลี่ยนเป็นค่าใหม่ที่กำหนด

หมายเหตุสำคัญ: ชนิดข้อมูล datetime ถูกนำออกจากมาตรฐาน HTML แล้ว ควรใช้ datetime-local แทนซึ่งไม่รวมข้อมูลโซนเวลา