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

HTML DOM Input Weekのmaxプロパティ徹底解説！使い方とサンプルコード

HTML DOM Input Week の max プロパティは、<input type="week"> 要素に設定されている max 属性の値を取得（return）または設定（set）するためのプロパティです。この属性を使うことで、ユーザーが選択できる週の上限（最も遅い週）を指定できます。

構文（Syntax）

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

値を取得する場合

inputWeekObject.max

値を設定する場合

max 属性に文字列値を代入します。

inputWeekObject.max = "YYYY-Www"

指定できる文字列値

max プロパティに設定できる「YYYY-Www」形式は、以下の要素で構成されています。

文字列値説明
YYYY年を表します（例：2017）
W年と週を区切るセパレーター（区切り文字）です
ww週番号を表します（例：52）

たとえば「2020-W52」のように記述すると、2020年の第52週が選択可能な最大の週となります。

サンプルコード

ここでは、Input Week の max プロパティを使った具体例を紹介します。保険更新日のシミュレーションとして、ボタンをクリックすると max 属性の値を動的に変更するデモです。

<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-max</legend>
<label for="WeekSelect">現在の週：
<input type="week" id="WeekSelect" value="2020-W01" max="2019-W52" disabled>
</label>
<input type="button" onclick="renewInsurance()" value="Renew Insurance">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputWeek = document.getElementById("WeekSelect");
    divDisplay.textContent = 'Insurance Expired as of: Week'+inputWeek.max.split("-W")[1];
    divDisplay.textContent += ' ,'+inputWeek.max.split("-W")[0];
    function renewInsurance() {
        inputWeek.max = '2029-W52';
        divDisplay.textContent = 'Insurance Renewed till: Week'+inputWeek.max.split("-W")[1];
        divDisplay.textContent += ' ,'+inputWeek.max.split("-W")[0];
    }
</script>
</body>
</html>

コードのポイント

  • 初期状態では、max 属性に「2019-W52」が設定されており、画面には「Insurance Expired as of: Week52, 2019」と表示されます。
  • split("-W") メソッドを使うことで、max 値を年と週番号に分割して表示しています。
  • ボタンをクリックすると renewInsurance() 関数が実行され、max プロパティに「2029-W52」を設定します。
  • その結果、表示が「Insurance Renewed till: Week52, 2029」に切り替わります。

実行結果

このコードを実行すると、以下のような出力が得られます。

「Renew Insurance」ボタンをクリックする前

HTML DOM Input Weekのmaxプロパティ徹底解説！使い方とサンプルコード

「Renew Insurance」ボタンをクリックした後

HTML DOM Input Weekのmaxプロパティ徹底解説！使い方とサンプルコード

まとめ

Input Week の max プロパティを使えば、JavaScript から動的に週入力フィールドの選択可能範囲を制御できます。フォームバリデーションや有効期限の管理など、日付・週に関わる UI を実装する際に非常に便利な機能なので、ぜひ活用してみてください。

  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