HTML DOM Input Month stepDown() Method: ลดเดือน

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

รูปแบบ (Syntax)

object.stepDown(number)

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

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

ปุ่มเพิ่ม/ลดเดือน (เหมือน stepUp แต่เน้น stepDown):

<!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>

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

• หากมี min attribute จะไม่ลดต่ำกว่าค่านั้น
• หากไม่มี min จะลดได้ไม่จำกัด (ปีจะลดลงตามลำดับ)
• ทำงานร่วมกับ step attribute

การใช้งานร่วมกับ step attribute

หากตั้ง step="3" แล้ว stepUp/stepDown จะเพิ่ม/ลดทีละ 3 เดือน (ไตรมาส)