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

HTML DOMのInput DatetimeLocal stepプロパティとは？秒・ミリ秒の間隔を制御する方法

HTML DOMのInput DatetimeLocal stepプロパティは、<input type="datetime-local">要素において、秒またはミリ秒の有効な間隔（ステップ値）を取得・設定するためのプロパティです。このプロパティを活用することで、ユーザーが選択できる時刻のきめ細かさを自由にコントロールできます。例えば、秒単位で入力させたい場合は「10」や「15」のように60を割り切れる数値を、ミリ秒単位で入力させたい場合は「.10」や「.01」のように1000を割り切れる小数を指定します。

構文

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

  • 現在のstep値を取得する場合（数値を返す）
inputDatetimeLocalObject.step
  • step属性に新しい数値を設定する場合
inputDatetimeLocalObject.step = number

パラメータ

パラメータnumberには、目的に応じて以下のいずれかの形式の値を指定します。

値説明
seconds（秒）60を余りなく割り切れる整数が有効な値となります（例：10、15、20）
milliseconds（ミリ秒）「.」（ドット）で始まり、1000を余りなく割り切れる小数が有効な値となります（例：.10、.20、.01）

コード例

それでは、Input DatetimeLocal stepプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、秒またはミリ秒のステップ値が動的に変更されるサンプルです。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal step</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-step</legend>
<label for="datetimeLocalSelect">ローカル日時 :
<input type="datetime-local" id="datetimeLocalSelect" step="2">
</label>
<input type="button" onclick="changeStep('10')" value="秒のステップを10に設定">
<input type="button" onclick="changeStep('.10')" value="ミリ秒のステップを.10に設定">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
   function changeStep(myStep) {
      inputDatetimeLocal.step = myStep;
      if(inputDatetimeLocal.step.indexOf('.') === -1)
         divDisplay.textContent = '秒のステップ: '+inputDatetimeLocal.step;
      else
         divDisplay.textContent = 'ミリ秒のステップ: '+inputDatetimeLocal.step;
   }
</script>
</body>
</html>

出力結果

このコードを実行すると、以下のような画面が表示されます。

「秒のステップを10に設定」ボタンをクリックした場合：

HTML DOMのInput DatetimeLocal stepプロパティとは？秒・ミリ秒の間隔を制御する方法

「ミリ秒のステップを.10に設定」ボタンをクリックした場合：

HTML DOMのInput DatetimeLocal stepプロパティとは？秒・ミリ秒の間隔を制御する方法

まとめ

stepプロパティを使えば、JavaScriptから動的にdatetime-local入力欄の時刻精度を切り替えられます。値にドット（.）が含まれているかどうかを判定することで、そのステップ値が「秒」単位なのか「ミリ秒」単位なのかを判別できる点もポイントです。予約システムやログ管理ツールなど、時刻入力の精度が求められるWebアプリケーションでぜひ活用してみてください。

  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 回あたりの移動