HTML DOM Input Month stepUp() Method: เพิ่มเดือน

เมธอด stepUp()ของ input type="month" เพิ่มค่าเดือนขึ้นตามจำนวนที่ระบุ (ค่าเริ่มต้น 1 เดือน)

รูปแบบ (Syntax)

object.stepUp(number)

หากไม่ระบุ number จะเพิ่ม 1 เดือน

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

ปุ่มเพิ่ม/ลดเดือน:

<!DOCTYPE html>
<html>
<head>
    <title>ตัวอย่าง stepUp/stepDown</title>
    <style>
        body { text-align: center; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height: 100vh; color: #fff; }
        p { font-size: 1.5rem; }
        input { width: 40%; }
        button { background-color: #db133a; color: #fff; padding: 8px; border: none; width: 120px; margin: 1rem; border-radius: 50px; outline: none; cursor: pointer; }
    </style>
</head>
<body>
    <h1>ตัวอย่าง stepUp/stepDown Method</h1>
    <p>สวัสดี! เลือกเดือนเกิดของคุณ</p>
    <input type="month"> <br>
    <button onclick="incValue()">เพิ่มเดือน (StepUp)</button>
    <button onclick="decValue()">ลดเดือน (StepDown)</button>
    <script>
        function incValue() { document.querySelector("input").stepUp(); }
        function decValue() { document.querySelector("input").stepDown(); }
    </script>
</body>
</html>

พฤติกรรมเมื่อถึงขอบเขต

• หากมี max attribute จะไม่เพิ่มเกินค่านั้น
• หากไม่มี max จะเพิ่มได้ไม่จำกัด (ปีจะเพิ่มขึ้นตามลำดับ)
• ทำงานร่วมกับ step attribute (ค่าเริ่มต้น 1 เดือน)

การใช้งานจริง

• ปุ่มนำทางเดือนก่อนหน้า/ถัดไปในปฏิทิน
• ปรับเดือนในรายงานหรือกราฟ
• Keyboard shortcut สำหรับ power user