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

HTML DOM Input Time の min プロパティとは？取得・設定方法をわかりやすく解説

HTML DOM の Input Time min プロパティは、<input type="time"> 要素に設定された min 属性（入力可能な最小時刻）を取得、または設定するためのプロパティです。この属性を利用することで、ユーザーが選択できる時刻の下限を制限できます。

構文

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

値を取得する場合

inputTimeObject.min

戻り値として、min 属性に設定された文字列が返されます。

値を設定する場合

inputTimeObject.min = "hh:mm:ss.ms"

指定できる文字列値の形式

設定する時刻は 「hh:mm:ss.ms」 の形式で指定します。各項目の意味は次のとおりです。

値詳細
hh時を表します（例：18）
mm分を表します（例：59）
ss秒を表します（例：00）
msミリ秒を表します（例：700）

なお、秒やミリ秒は必要に応じて省略することも可能です（例：「01:30」など）。

サンプルコード

ここでは、試験会場の退室可能時刻をチェックする例を使って、Input Time min プロパティの動作を確認してみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Time min</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>Time-min</legend>
<label for="TimeSelect">経過時間：
<input type="time" id="TimeSelect" value="00:00:00" min="01:30:00">
</label>
<input type="button" onclick="getElapsedTime()" value="確認">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputTime = document.getElementById("TimeSelect");
    divDisplay.textContent = '最低待機時間：' + inputTime.min;
    function getElapsedTime() {
        if(inputTime.value >= inputTime.min)
            divDisplay.textContent = '規定時間が経過したので、退室できます：' + inputTime.value;
        else
            divDisplay.textContent = 'この時刻までは退室できません：' + inputTime.min;
    }
</script>
</body>
</html>

コードの解説

  • <input type="time"> に対して min="01:30:00" を設定し、午前1時30分より前の時刻を選択できないようにしています。
  • ページ読み込み時に JavaScript の inputTime.min を参照し、最低待機時間を画面に表示します。
  • 「確認」ボタンをクリックすると、入力された時刻（value）と最小時刻（min）を比較し、条件を満たしているかどうかを判定してメッセージを表示します。

実行結果

このコードを実行すると、以下のような動作になります。

「確認」ボタンをクリックする前：

初期状態では、min 属性に設定された「01:30:00」が「最低待機時間」として表示されます。

HTML DOM Input Time の min プロパティとは？取得・設定方法をわかりやすく解説

無効な時刻（min 未満）を入力して「確認」をクリックした場合：

入力した時刻が min 属性の値より前のため、「この時刻までは退室できません」というメッセージが表示されます。

HTML DOM Input Time の min プロパティとは？取得・設定方法をわかりやすく解説

有効な時刻（min 以上）を入力して「確認」をクリックした場合：

入力した時刻が min 属性の値以降のため、「退室できます」というメッセージが表示されます。

HTML DOM Input Time の min プロパティとは？取得・設定方法をわかりやすく解説

まとめ

Input Time の min プロパティを使えば、JavaScript から時刻入力フィールドの下限時刻を動的に取得・変更できます。フォームのバリデーションや、特定の時間帯のみ選択を許可したい場面で非常に便利です。対になるプロパティとして最大時刻を指定する max プロパティも合わせて活用すると、より柔軟な時刻入力制御が実現できます。

  1. HTML DOM Input Rangeのminプロパティとは?構文と使い方を解説

    HTML DOM Input RangeのminプロパティとはHTML DOMのInput Range minプロパティは、レンジスライダーコントロールのmin属性値を設定または取得するために使用されます。この属性はスライダーコントロールの最小値を示すもので、通常はmaxプロパティと組み合わせて、スライダーが移動できる値の範囲を定義する際に活用されます。構文minプロパティの構文は以下の通りです。minプロパティの値を設定する場合rangeObject.min = numberここで、numberはスライダーコントロールに設定する最小値を表します。minプロパティの値を取得する場合rangeO

  2. HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime