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

HTML DOM Input Date の max プロパティの使い方を徹底解説

HTML DOM の Input Date max プロパティは、日付入力フィールド（<input type="date">）に設定された max 属性を取得・設定するためのプロパティです。max 属性を利用することで、ユーザーが選択できる日付の上限（最も遅い日付）を制御できます。

構文

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

値を取得する場合

inputDateObject.max

値を設定する場合

inputDateObject.max = "YYYY-MM-DD"

指定できる文字列値

設定値である「YYYY-MM-DD」の各部分は、以下のように対応しています。

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

サンプルコード

それでは、Input Date max プロパティの具体的な使用例を見てみましょう。以下のコードでは、初期状態で max 属性が「2018-12-31」に設定された日付入力フィールドを用意し、ボタンをクリックすると max の値を「2020-12-31」に変更します。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
Date Select: <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">Change Max Date</button>
<div id="divDisplay"></div>
<script>
    var inputDate = document.getElementById("date");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Max of date input: '+inputDate.max;
    function getMaxDate() {
        var oldInputDate = inputDate.max;
        inputDate.max = '2020-12-31';
        divDisplay.textContent = 'Max of date input: '+inputDate.max;
    }
</script>
</body>
</html>

実行結果

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

「Change Max Date」ボタンをクリックする前：

HTML DOM Input Date の max プロパティの使い方を徹底解説

「Change Max Date」ボタンをクリックした後：

HTML DOM Input Date の max プロパティの使い方を徹底解説

このように、JavaScript から動的に max 属性を書き換えることで、日付入力フィールドで選択可能な日付の範囲を柔軟に変更できます。フォームのバリデーションや予約システムなど、日付の入力範囲を制限したい場面で非常に便利なプロパティです。

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

    Meter maxプロパティとはmeterオブジェクトのmaxプロパティは、HTMLの<meter>要素におけるmax属性に対応する数値を、取得または設定するためのプロパティです。<meter>要素は測定値や使用量などを視覚的に表示するための要素で、max属性はその測定範囲の最大値を表します。このmaxプロパティは、min（最小値）、low（低域しきい値）、high（高域しきい値）などの属性と組み合わせて使うことで、より精度の高いゲージ表示を実現できます。構文maxプロパティの値を取得する場合meterElementObject.maxmaxプロパティに値を設定する場合

  2. HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説

    HTML DOM の Input Range max プロパティは、レンジスライダー（type=range の入力コントロール）における max 属性の値を設定または取得するために使用されます。max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。構文max プロパティに値を設定する場合rangeObject.max = numberここで number は、スライダーコントロールの最大値を表します。max プロパティの値を取得する場合var value = rangeObject