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

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

HTML DOM の Input DatetimeLocal max プロパティは、<input type="datetime-local"> で作成された入力フィールドにおける max 属性の値を取得（参照）または設定（変更）するために使用されます。max 属性を活用することで、ユーザーが選択できる日時の上限を制御できます。

構文

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

値を取得する場合

inputDatetimeLocalObject.max

値を設定する場合

inputDatetimeLocalObject.max = "YYYY-MM-DDThh:mm:ss"

文字列値の形式

max 属性に指定できる日時の形式は "YYYY-MM-DDThh:mm:ss" であり、それぞれの部分は次のような意味を持ちます。

文字列説明
YYYY年を表します（例：2006）
MM月を表します（例：06 は6月）
DD日を表します（例：17）
T日付と時刻を区切るセパレーター（区切り文字）です
hh時間（時）を表します（例：02）
mm分を表します（例：21）
ss秒を表します（例：40）

補足： min 属性と max 属性を同時に設定する場合は、min の値が max の値より小さくなるようにしてください。逆になっていると、ブラウザによってはバリデーションが正しく機能しません。

サンプルコード

以下に、Input DatetimeLocal max プロパティを使った具体的な例を示します。ボタンをクリックすると、max 属性の値を動的に書き換え、入力フィールドの値も更新される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal max</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-max</legend>
<label for="datetimeLocalSelect">保険の有効期限：
<input type="datetime-local" id="datetimeLocalSelect" value="2019-07-01T23:59:59" max="2019-08-01T23:59:59" disabled>
</label>
<input type="button" onclick="renewInsurance()" value="保険を更新する">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
    function renewInsurance() {
        inputDatetimeLocal.max = '2029-07-01T23:59:59';
        inputDatetimeLocal.value = inputDatetimeLocal.max;
        divDisplay.textContent = '更新後の有効期限：' + inputDatetimeLocal.value;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

「保険を更新する」ボタンをクリックする前：

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

「保険を更新する」ボタンをクリックした後：

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

このように、max プロパティを使えば JavaScript から動的に日時の上限を変更でき、契約期限の延長や予約システムなど、さまざまな場面で応用できます。

  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