HTML DOM Input Datetime の max プロパティとは？使い方を徹底解説
HTML DOM Input Datetime の max プロパティとは
HTML DOM の Input Datetime max プロパティは、<input type="datetime"> 要素に設定されている max 属性を取得（参照）または設定するためのプロパティです。max 属性を活用することで、ユーザーが入力できる最大の日時に上限を設けることができます。
構文
max プロパティの基本的な構文は以下の通りです。
値を取得する場合
inputDatetimeObject.max
値を設定する場合
inputDatetimeObject.max = YYYY-MM-DDThh:mm:ssTZD
文字列値の書式（YYYY-MM-DDThh:mm:ssTZD）
「YYYY-MM-DDThh:mm:ssTZD」は、以下の各要素で構成される標準的な日時形式です。
| 値 | 説明 |
|---|---|
| YYYY | 年を表します（例：1998） |
| MM | 月を表します（例：05 は5月） |
| DD | 日を表します（例：24） |
| T | 日付と時刻を区切るセパレーターです |
| hh | 時（時間）を表します（例：12） |
| mm | 分を表します（例：48） |
| ss | 秒を表します（例：00） |
| TZD | タイムゾーン指定子です（例：IST はインド標準時、Z は UTC を表します） |
サンプルコード
それでは、Input Datetime の max プロパティを使用した具体的な例を見てみましょう。この例では、初期状態で設定された保険更新期限の最大日時を表示し、ボタンをクリックすると新しい最大日時へと変更します。
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Max</title>
</head>
<body>
<form>
Date & Time: <input type="datetime" id="dateTime" name="DateSelect" value="2019-12-31T23:49:59Z" max="2019-12-31T23:59:59Z">
</form>
<button onclick="getMaxDate()">Renew Insurance</button>
<div id="divDisplay"></div>
<script>
var inputDate = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Insurance Datetime: '+inputDate.max;
function getMaxDate() {
var oldInputDate = inputDate.max;
inputDate.max = '2029-12-31T23:49:59Z';
divDisplay.textContent = 'New Insurance Datetime: '+inputDate.max;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、以下のような画面が表示されます。
「Renew Insurance」ボタンをクリックする前：
「Renew Insurance」ボタンをクリックした後：
ボタンをクリックすると JavaScript の関数が呼び出され、max プロパティの値が 2019-12-31T23:49:59Z から 2029-12-31T23:49:59Z へと書き換わり、その結果が画面上に反映されます。
注意点
<input type="datetime"> は現在の HTML 標準仕様から削除されており、最新のブラウザではサポートされていません。実際の開発では、代わりに <input type="datetime-local"> を使用することが推奨されます。なお、max プロパティによる日時の取得・設定は、datetime-local 型に対しても同様の方法で利用できます。
-
HTML DOM Input Range の max プロパティとは？使い方をサンプル付きで解説
HTML DOM の Input Range max プロパティは、レンジスライダー（type=range の入力コントロール）における max 属性の値を設定または取得するために使用されます。max 属性はスライダーが取り得る最大値を示すもので、通常は min プロパティと組み合わせて使用することで、スライダーが動ける値の範囲（最小値〜最大値）を定義します。構文max プロパティに値を設定する場合rangeObject.max = numberここで number は、スライダーコントロールの最大値を表します。max プロパティの値を取得する場合var value = rangeObject
-
HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime