HTML DOM Input Date stepDown()メソッドの使い方を徹底解説
HTML DOM の Input Date stepDown() メソッドは、日付入力フィールド（<input type="date">）の値を、指定した日数だけ減らすためのメソッドです。ボタン操作などで日付を簡単に前日に移動させたい場合などに便利な機能です。
構文（Syntax）
stepDown() メソッドは、引数に数値を指定して呼び出します。引数を省略した場合のデフォルト値は 1 となり、その場合は日付が1日だけ減少します。
inputDateObject.stepDown(number)
パラメータ
- number：日付を減らす日数を指定します。省略可能で、デフォルトは 1 です。
サンプルコード
それでは、Input Date stepDown() メソッドの具体的な使用例を見ていきましょう。以下の例では、「2日減らす」「3日減らす」の2つのボタンを用意し、クリックしたボタンに応じて日付フィールドの値を減少させています。
<!DOCTYPE html>
<html>
<head>
<title>Input Date stepDown()</title>
</head>
<body>
<form>
<div>
カレンダー： <input type="date" id="dateSelect" value ="2019-07-07">
</div>
</form>
<button onclick="changeStep(2)">2日減らす</button>
<button onclick="changeStep(3)">3日減らす</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
function changeStep(num){
if(num===2)
inputDate.stepDown(2);
else
inputDate.stepDown(3);
divDisplay.textContent = '現在の日付から減らした日数： '+num;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
「2日減らす」ボタンをクリックした場合：
初期値「2019-07-07」から2日減り、日付は「2019-07-05」に更新されます。
「3日減らす」ボタンをクリックした場合：
同様に3日減らした場合は、日付が「2019-07-04」に変更されます。
ポイントまとめ
- stepDown() は日付フィールドの値を過去方向へ移動させるメソッドです。
- 逆に日付を未来方向へ進めたい場合は、stepUp() メソッドを使用します。
- 引数を指定しなければ、1日ずつ移動します。
- 主要なモダンブラウザ（Chrome、Edge、Firefox、Opera など）でサポートされています。
-
HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説
HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び
-
HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説
HTML DOM Input Range stepDown()メソッドとはHTML DOMのInput Range stepDown()メソッドは、スライダー（レンジ入力）コントロールの値を指定した数だけ減少させるために使用します。引数を省略した場合は1ずつ減少します。さらに、step属性が指定されている場合は、そのステップ値の倍数単位で値が減っていきます。例えば、step=20が設定されている状態でstepDown(2)を実行すると、20×2＝40ずつ値が減少します。構文RangeオブジェクトのstepDown()メソッドの構文は以下の通りです。rangeObject.stepDown(nu