Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Phương thức stepUp() của Input Month trong HTML DOM

Phương thức stepUp() của <input type="month"> **tăng** giá trị tháng lên một số lượng xác định. Nếu bỏ qua tham số, mặc định tăng 1 tháng.

Cú pháp

monthInput.stepUp(number)

number (tùy chọn): Số tháng muốn tăng. Mặc định = 1.

Ví dụ: Tăng/giảm tháng bằng nút bấm

<!DOCTYPE html>
<html>
<head>
    <title>Demo stepUp()/stepDown() Month</title>
    <style>
        body { text-align: center; background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat; height: 100vh; color: white; font-family: sans-serif; }
        p { font-size: 1.5rem; }
        input[type="month"] { width: 40%; padding: 8px; }
        button {
            background-color: #dc3545; color: white; padding: 8px 16px;
            border: none; width: 140px; margin: 10px; border-radius: 25px;
            outline: none; cursor: pointer; font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Demo stepUp()/stepDown() Month</h1>
    <p>Chọn tháng sinh của bạn</p>
    <input type="month" id="monthInput">
    <br><br>
    <button onclick="incMonth()">Tăng tháng (stepUp)</button>
    <button onclick="decMonth()">Giảm tháng (stepDown)</button>
    <script>
        function incMonth() { document.getElementById("monthInput").stepUp(); }
        function decMonth() { document.getElementById("monthInput").stepDown(); }
    </script>
</body>
</html>

Kết quả

Ban đầu:

Phương thức stepUp() của Input Month trong HTML DOM

Nhấn "Tăng tháng" hoặc "Giảm tháng":

Phương thức stepUp() của Input Month trong HTML DOM

Phương thức stepUp() của Input Month trong HTML DOM

💡 Ứng dụng: Tạo điều khiển "Tháng trước/Tháng sau" cho lịch, bộ lọc báo cáo hàng tháng, hoặc giới hạn chọn trong khoảng min/max.