HTML DOM Input Datetime の min プロパティの使い方を解説
HTML DOM の Input Datetime min プロパティは、入力タイプが datetime の要素における min 属性の値を取得または設定するために使用します。この属性を利用することで、ユーザーが選択できる日時の最小値を制限できます。
構文
min プロパティの基本的な構文は以下のとおりです。
値を取得する場合
inputDatetimeObject.min
値を設定する場合
inputDatetimeObject.min = 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 はインド標準時を示します） |
サンプルコード
それでは、Input Datetime の min プロパティを使用した具体的な例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Min</title>
</head>
<body>
<form>
日付 & 時刻: <input type="datetime" id="dateTime" name="DateSelect" value="2009-6-24T20:49Z" min="2008-12-31T23:59:59Z">
</form>
<button onclick="minDateDecrease()">最小日時を変更</button>
<div id="divDisplay"></div>
<script>
var inputDatetime = document.getElementById("dateTime");
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = '現在の最小日時: '+inputDatetime.min;
function minDateDecrease() {
inputDatetime.min = '2010-12-31T23:59:59Z';
divDisplay.textContent = '現在の最小日時: '+inputDatetime.min;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
「最小日時を変更」ボタンをクリックする前：
「最小日時を変更」ボタンをクリックした後：
ボタンをクリックすると JavaScript 関数が呼び出され、datetime 入力フィールドの 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
-
HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime