【初心者向け】HTML DOM Input Week の min プロパティの使い方とサンプルコード
HTML DOM の Input Week（週選択フィールド）オブジェクトが持つ min プロパティは、<input type="week"> 要素に設定された min 属性の値を取得（return）または設定（set）するためのものです。min 属性を活用することで、ユーザーが選択できる最も早い週を制限できます。
基本情報
- 対象：
<input type="week">要素 - 役割：min 属性の読み取りと書き込み
- 戻り値：週を表す文字列（YYYY-Www 形式）
構文
min プロパティの基本的な使い方は、以下の 2 パターンです。
1. 値を取得する場合
inputWeekObject.min
現在設定されている min 属性の値を文字列として返します。
2. 値を設定する場合
inputWeekObject.min = YYYY-Www
指定した文字列を、新しい min 値として設定します。
文字列値（YYYY-Www）の構成要素
min プロパティに指定できる値は「YYYY-Www」という標準形式です。それぞれの部分の意味は以下の表のとおりです。
| 文字列値 | 詳細 |
|---|---|
| YYYY | 年を表します（例：1990） |
| -W | 年と週をつなぐ区切り文字（セパレーター）です |
| ww | 週番号を 2 桁で表します（例：07） |
たとえば「2020-W05」は「2020 年の第 5 週」を意味します。
サンプルコード
ここでは、Input Week の min プロパティを実際に使った例を紹介します。ボタンをクリックすると、min 属性に設定された値を読み取り、画面に表示します。
<!DOCTYPE html>
<html>
<head>
<title>Input Week 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>Week-min</legend>
<label for="WeekSelect">Vacation Week:
<input type="week" id="WeekSelect" value="2019-W45" min="2020-W05">
</label>
<input type="button" onclick="getMinimum()" value="Go on a vacation">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function getMinimum() {
divDisplay.textContent = 'You can go on a vacation after: Week: '+inputWeek.min.split("-W")[1]+' ,'+inputWeek.min.split("-W")[0]
}
</script>
</body>
</html>
このサンプルでは、min 属性に「2020-W05」が設定されています。JavaScript の split("-W") メソッドを使うことで、min の値から週番号と年を分割して取得し、div 要素へ出力しています。
実行結果
上記のコードをブラウザで開くと、以下のように表示されます。
「Go on a vacation」ボタンをクリックする前：
「Go on a vacation」ボタンをクリックした後：
ボタンをクリックすると、「You can go on a vacation after: Week: 05, 2020」というように、min 属性から取得した週番号と年が画面に表示されます。
まとめ
Input Week の min プロパティを使えば、JavaScript から動的に週選択フィールドの最小値（最も早い週）を取得・変更できます。max プロパティと組み合わせれば、ユーザーが選択できる週の範囲を柔軟に制御できるため、予約システムやスケジュール管理フォームなどでも活用範囲が広い便利なプロパティです。
-
HTML DOMのMeter minプロパティとは？取得・設定方法をわかりやすく解説
Meter の min プロパティは、HTML の <meter> 要素における min 属性に対応する数値を、JavaScript から取得または設定できるプロパティです。このプロパティを max、high、low などの各属性と組み合わせて使うことで、より正確で視覚的に分かりやすいメーター表示を実現できます。 構文 min プロパティの基本的な構文は以下のとおりです。 現在の値を取得する場合 meterElementObject.min 新しい値を設定する場合 meterElementObject.min = number 取得時には min 属性に対応する数値が返され、設定時
-
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