HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Input DatetimeLocal stepUp()メソッドの使い方と実例

HTML DOMのInput DatetimeLocal stepUp()メソッドは、datetime-local入力フィールドの値を指定した分数だけ増加させるために使用されるメソッドです。このメソッドを使うことで、JavaScriptから簡単に日時の値を操作できます。

構文

stepUp()メソッドの基本的な構文は以下の通りです。

引数に数値を指定して呼び出します。引数を省略した場合、デフォルト値は「1」となります。

inputDatetimeLocalObject.stepUp(number)

使用例

ここでは、Input DatetimeLocal stepUp()メソッドの実際の動作を確認できるサンプルコードを紹介します。ボタンをクリックすると、datetime-localフィールドの値が指定した分数だけ増加します。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal stepUp()</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-stepUp( )</legend>
<label for="datetimeLocalSelect">Local Date Time :
<input type="datetime-local" id="datetimeLocalSelect" value="2010-12-21T23:50">
</label>
<input type="button" onclick="changeStep(10)" value="Increase by 10">
<input type="button" onclick="changeStep(25)" value="Increase by 25">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function changeStep(myStepUp) {
        inputDatetimeLocal.stepUp(myStepUp);
        divDisplay.textContent = 'Current Step: '+myStepUp;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

ボタンをクリックする前の状態

初期値として「2010-12-21T23:50」が設定されたdatetime-localフィールドが表示されます。

HTML DOM Input DatetimeLocal stepUp()メソッドの使い方と実例

「Increase by 10」ボタンをクリックした場合

フィールドの値が10分増加し、「Current Step: 10」というメッセージが表示されます。

HTML DOM Input DatetimeLocal stepUp()メソッドの使い方と実例

「Increase by 25」ボタンをクリックした場合

フィールドの値が25分増加し、「Current Step: 25」というメッセージが表示されます。

HTML DOM Input DatetimeLocal stepUp()メソッドの使い方と実例

まとめ

stepUp()メソッドは、datetime-localフィールドの値を増加させる際に便利なメソッドです。引数に増加させたい分数を指定することで、柔軟に日時の値を操作できます。なお、逆に値を減少させたい場合は、対となるstepDown()メソッドを使用します。フォームやカレンダー機能など、日時入力を扱うWebアプリケーション開発でぜひ活用してみてください。

  1. HTML DOM Input Week stepUp()メソッドの使い方をわかりやすく解説

    HTML DOM の Input Week stepUp() メソッドは、<input type=week> で作成された週フィールドの値を、指定した週数だけ増加させるためのメソッドです。JavaScript から呼び出すことで、ユーザー操作なしに週の値を動的に進めることができます。stepUp() メソッドの構文stepUp() メソッドの基本的な構文は以下のとおりです。inputWeekObject.stepUp(number)引数 number には、増加させたい週数を数値で指定します。この引数は省略可能で、省略した場合のデフォルト値は 1 になります。つまり、引数なしで呼び

  2. 【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は、スライダーの値をどれ