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

HTML DOM Input Date の min プロパティとは？取得・設定方法を解説

HTML DOM の Input Date min プロパティは、<input type="date"> で作成された日付入力フィールドの min 属性を取得（参照）または設定するために使用されます。この属性を指定することで、ユーザーが選択できる日付の下限（最小日付）を制御できます。

構文

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

値を取得する場合

inputDateObject.min

値を設定する場合

inputDateObject.min = "YYYY-MM-DD"

文字列値の形式

設定できる値は 「YYYY-MM-DD」 形式の文字列で、各部分は次のように構成されます。

文字列説明
YYYY年を表します（例：1998）
MM月を表します（例：05 は5月）
DD日を表します（例：24）

サンプルコード

ここでは、Input Date の min プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、日付入力フィールドの最小日付が変更されます。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Min</title>
</head>
<body>
<form>
日付を選択：<input type="date" id="date" name="DateSelect" min="2000-01-01">
</form>
<button onclick="getMinDate()">最小日付を変更</button>
<div id="divDisplay"></div>
<script>
    var inputDate = document.getElementById("date");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = '日付入力の最小値：' + inputDate.min;
    function getMinDate() {
        inputDate.min = '1998-07-01';
        divDisplay.textContent = '日付入力の最小値：' + inputDate.min;
    }
</script>
</body>
</html>

実行結果

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

ボタンをクリックする前

初期状態では、min 属性に設定された 「2000-01-01」 が最小日付として表示されます。それより前の日付は選択できません。

「最小日付を変更」ボタンをクリックした後

JavaScript の getMinDate() 関数によって min 値が 「1998-07-01」 に更新され、画面上の表示も新しい最小日付に切り替わります。

まとめ

Input Date の min プロパティを使えば、JavaScript から動的に日付入力フィールドの選択可能な範囲を制御できます。フォームのバリデーションや予約システムなど、特定の日付以降のみを選択させたい場面で非常に便利です。なお、対になる max プロパティと組み合わせることで、選択できる日付の範囲を上下両方から限定することも可能です。

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

    Meter の min プロパティは、HTML の <meter> 要素における min 属性に対応する数値を、JavaScript から取得または設定できるプロパティです。このプロパティを max、high、low などの各属性と組み合わせて使うことで、より正確で視覚的に分かりやすいメーター表示を実現できます。 構文 min プロパティの基本的な構文は以下のとおりです。 現在の値を取得する場合 meterElementObject.min 新しい値を設定する場合 meterElementObject.min = number 取得時には min 属性に対応する数値が返され、設定時

  2. 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