HTML DOM Input Month Object แทนอิลิเมนต์ <input type="month"> ใช้สร้างและจัดการช่องเลือกเดือน/ปี
รูปแบบการสร้าง (Syntax)
var monthInput = document.createElement("INPUT");
monthInput.setAttribute("type", "month");
คุณสมบัติหลัก (Properties)
| คุณสมบัติ | คำอธิบาย |
|---|---|
| autocomplete | คืนค่าและกำหนด autocomplete attribute |
| autofocus | คืนค่าและกำหนดโฟกัสอัตโนมัติ |
| disabled | คืนค่าและกำหนดสถานะปิดใช้งาน |
| defaultValue | คืนค่าและกำหนดค่าเริ่มต้น |
| form | คืนค่ารีเฟอร์เรนซ์ของฟอร์มที่ครอบคลุม |
| list | คืนค่ารีเฟอร์เรนซ์ของ datalist ที่เกี่ยวข้อง |
| max | คืนค่าและกำหนดเดือนสูงสุดที่เลือกได้ (YYYY-MM) |
| min | คืนค่าและกำหนดเดือนต่ำสุดที่เลือกได้ (YYYY-MM) |
| name | คืนค่าและกำหนดแอตทริบิวต์ name |
| readOnly | คืนค่าและกำหนดสถานะอ่านอย่างเดียว |
| required | คืนค่าและกำหนดว่าบังคับกรอกหรือไม่ |
| step | คืนค่าและกำหนดช่วงขั้นของเดือน (ค่าเริ่มต้น 1) |
| type | คืนค่า "month" (อ่านอย่างเดียว) |
| value | คืนค่าและกำหนดค่าปัจจุบัน (YYYY-MM) |
เมธอด (Methods)
| เมธอด | คำอธิบาย |
|---|---|
| stepUp(n) | เพิ่มเดือนขึ้น n เดือน (ค่าเริ่มต้น 1) |
| stepDown(n) | ลดเดือนลง n เดือน (ค่าเริ่มต้น 1) |
ตัวอย่างการใช้งาน
สร้างช่องเลือกเดือนพร้อมค่าเริ่มต้น:
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; background-color: #fff; color: #0197F6; }
h1 { color: #23CE6B; }
.btn { background-color: #fff; border: 1.5px dashed #0197F6; height: 2rem; border-radius: 2px; width: 60%; margin: 2rem auto; display: block; color: #0197F6; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>ตัวอย่าง DOM Input month Object</h1>
<button onclick="createMonthField()" class="btn">สร้างช่องเลือกเดือน</button>
<script>
function createMonthField() {
var monthInput = document.createElement("INPUT");
monthInput.setAttribute("type", "month");
monthInput.setAttribute("value", "2019-07");
document.body.appendChild(monthInput);
}
</script>
</body>
</html>
รองรับเบราว์เซอร์
Chrome, Edge, Opera รองรับดี Firefox และ Safari รองรับบางส่วน (อาจแสดงเป็น text input ธรรมดา)