HTML DOM Input Date stepUp()メソッドの使い方を徹底解説
stepUp()メソッドとは
HTML DOMのInput Date stepUp()メソッドは、日付入力フィールド（<input type="date">）の現在の日付を、指定した日数だけ前に進めるためのメソッドです。引数に増加させる日数を数値で指定でき、引数を省略した場合は既定値の「1」ずつ日付が進みます。
構文
stepUp()メソッドの基本的な構文は以下のとおりです。
inputDateObject.stepUp(number)
numberには、日付を進めたい日数を指定します。省略した場合は1日ずつ進みます。
サンプルコード
それでは、Input Date stepUp()メソッドを使った具体的な例を見てみましょう。ボタンをクリックすると、日付フィールドの値がそれぞれ2日・3日ずつ増加します。
<!DOCTYPE html>
<html>
<head>
<title>Input Date stepUp()</title>
</head>
<body>
<form>
<div>
カレンダー: <input type="date" id="dateSelect" value="2019-06-06">
</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.stepUp(2);
else
inputDate.stepUp(3);
divDisplay.textContent = '現在の日付から'+num+'日進みました';
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のように表示されます。
「2日進める」ボタンをクリックした場合
「3日進める」ボタンをクリックした場合
押さえておきたいポイント
- 引数を省略した場合、日付は1日だけ進みます。
- 逆に日付を過去方向へ戻したい場合は、stepDown()メソッドを使用します。
- 入力フィールドにstep属性が設定されている場合は、そのステップ値を単位として日付が移動します。
- 月や週など他の種類の日時フィールドにも同様のメソッドが用意されています。
-
HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説
HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び
-
【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説
HTML DOMのInput Range（type=range）で利用できるstepUp()メソッドは、スライダーコントロールの現在値を指定した数だけ増加させるためのメソッドです。引数を省略した場合は1ずつ増加します。また、input要素にstep属性が指定されている場合は、そのstep値の倍数単位で値が増加します。たとえばstep=20が設定されている場合、stepUp(2)を実行すると20×2＝40だけ値が増加します。 構文 RangeオブジェクトのstepUp()メソッドの構文は以下のとおりです。 rangeObject.stepUp(number) numberは、スライダーの値をどれ