ออบเจ็กต์ Input Time ของ HTML DOM แทนองค์ประกอบ <input type="time"> ให้เข้าถึงคุณสมบัติและเมธอดต่างๆ ของช่องป้อนเวลา
ไวยากรณ์ (Syntax)
สร้างช่องป้อนเวลาแบบไดนามิก:
var timeObject = document.createElement("input"); timeObject.type = "time";
แอตทริบิวต์ (Attributes)
| แอตทริบิวต์ | คำอธิบาย |
|---|---|
| autocomplete | ค่าของแอตทริบิวต์ autocomplete ของช่องเวลา |
| autofocus | กำหนดให้โฟกัสอัตโนมัติเมื่อโหลดหน้า |
| defaultValue | ตั้งค่า/ดึงค่าเริ่มต้นของช่องเวลา |
| disabled | ปิด/เปิดการใช้งานช่องเวลา |
| form | อ้างอิงฟอร์มที่ครอบคลุมช่องเวลา |
| max | ตั้งค่า/ดึงเวลาสูงสุดที่อนุญาต |
| min | ตั้งค่า/ดึงเวลาต่ำสุดที่อนุญาต |
| name | ค่าของแอตทริบิวต์ name ของช่องเวลา |
| readOnly | กำหนดให้ช่องเวลาอ่านอย่างเดียว |
| required | กำหนดให้ช่องเวลาบังคับกรอก |
| step | ค่าของแอตทริบิวต์ step (ช่วงเวลา) |
| type | คืนค่าประเภทฟอร์ม (จะเป็น "time") |
| value | ตั้งค่า/ดึงค่าของแอตทริบิวต์ value |
เมธอด (Methods)
| เมธอด | คำอธิบาย |
|---|---|
| stepDown() | ลดเวลาลงตามจำนวนนาทีที่ระบุ |
| stepUp() | เพิ่มเวลาขึ้นตามจำนวนนาทีที่ระบุ |
ตัวอย่างการใช้งาน
ตัวอย่างเข้าถึงคุณสมบัติ form ของช่องเวลา
<!DOCTYPE html>
<html>
<head>
<title>Input Time form</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin: 5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form id="Physics">
<fieldset>
<legend>Time-form</legend>
<label for="TimeSelect">เวลาสอบ : <input type="time" id="TimeSelect" value="14:00" disabled> </label>
<input type="button" onclick="getform()" value="Which Exam?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function getform() {
divDisplay.textContent = inputTime.form.id + ' exam starts from ' + inputTime.value;
}
</script>
</body>
</html>
ผลลัพธ์
ก่อนคลิกปุ่ม - ช่องเวลาแสดง 14:00 แต่อ่านอย่างเดียว (disabled)
หลังคลิกปุ่ม "Which Exam?" - แสดง "Physics exam starts from 14:00"
รูปแบบเวลา: ใช้รูปแบบ 24 ชั่วโมง HH:MM หรือ HH:MM:SS หรือ HH:MM:SS.ms