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

HTML DOM Input Date の step プロパティとは？日付選択間隔の設定方法を解説

HTML DOM の Input Date step プロパティは、ユーザーがカレンダーを開いたときに選択できる「日」の間隔（ステップ）を定義するためのプロパティです。このプロパティを使うことで、<input type="date"> 要素の step 属性の値を取得したり、新しい値を設定したりすることができます。

たとえば step に「2」を指定すると、1日おきの日付のみが選択対象となり、フォームで特定の日付パターンだけをユーザーに入力させたい場合に便利です。なお、date 型の場合、step の単位は「日数」となります。

構文

step プロパティの基本的な構文は以下のとおりです。

値を取得する場合

inputDateObject.step

値を設定する場合

inputDateObject.step = number

サンプルコード

それでは、Input Date step プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Date required</title>
</head>
<body>
<form>
<div>
Odd Days Calendar: <input type="date" id="dateSelect" step="2">
</div>
</form>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDate = document.getElementById("dateSelect");
    divDisplay.textContent = 'Current step: '+inputDate.step;
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような出力が得られます。ここでは step 属性に「2」が設定されているため、画面には現在のステップ値として「Current step: 2」が表示されます。

HTML DOM Input Date の step プロパティとは？日付選択間隔の設定方法を解説

まとめ

step プロパティを活用すれば、JavaScript から動的に日付入力欄の選択間隔を制御できます。取得と設定の両方に対応しているため、ユーザーの操作や条件に応じて柔軟にフォームの挙動を変えたい場面でぜひ活用してください。

  1. HTML DOM Input Week の step プロパティとは？構文と使い方を実例付きで解説

    HTML DOM の Input Week step プロパティは、<input type=week> で入力できる週の間隔（ステップ）を定義するためのものです。このプロパティを設定することで、ユーザーが選択できる週を一定の間隔で制限することができます。構文step プロパティの構文は以下のとおりです。値の取得inputWeekObject.step値の設定step 属性に数値を設定します。inputWeekObject.step = numberパラメータパラメータ number には以下の値を指定できます。weeks正の整数である限り、すべての値が有効な値として扱われますサンプ

  2. HTML DOM 入力範囲（Range）の step プロパティとは？使い方を解説

    HTML DOM の Input Range step プロパティは、スライダーコントロール（<input type=range>）の step 属性値を設定または取得するために使用されるプロパティです。step プロパティでは、スライダーが 1 回の操作でどれだけ移動するかを指定します。さらに、max 属性と min 属性を step プロパティと組み合わせて使うことで、有効な値の範囲を柔軟に定義することができます。構文step プロパティを設定する場合rangeObject.step = numberここで指定する number は、スライダーコントロールの 1 回あたりの移動