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

HTML DOM Input Datetimeオブジェクトとは？構文・属性・使い方を実例付きで解説

HTML DOM の Input Datetime オブジェクトは、type="datetime" が指定された HTML の <input> 要素を表すオブジェクトです。このオブジェクトを利用すると、JavaScript から日時入力フィールドの値や各種属性へアクセスし、動的に操作することができます。

なお、Safari を除く主要ブラウザでは type="datetime" は単なるテキスト入力として扱われる点に注意してください。また、datetime 型は HTML5 の仕様から削除されているため、実務ではタイムゾーン情報を持たないローカル日時を扱う type="datetime-local" の使用が推奨されます。

構文

以下が構文の一覧です。

type="datetime" の <input> 要素を作成する

var datetimeObject = document.createElement("input");
datetimeObject.type = "datetime";

主な属性一覧

datetimeObject には、次の属性（プロパティ）があります。

属性説明
autocomplete日時フィールドの autocomplete 属性の値を定義します。
autofocusページの初期読み込み時に、日時フィールドへ自動的にフォーカスするかどうかを設定します。
defaultValue日時フィールドのデフォルト値を設定・取得します。
disabled日時フィールドが無効状態か有効状態かを設定・取得します。
form日時フィールドが属しているフォームへの参照を返します。
min日時フィールドに入力できる最小値（min 属性）を取得・設定します。
max日時フィールドに入力できる最大値（max 属性）を取得・設定します。
name日時フィールドの name 属性の値を定義します。
readOnly日時フィールドが読み取り専用かどうかを設定します。
requiredフォーム送信時に、日時フィールドの入力が必須かどうかを定義します。
step日時フィールドの step 属性（値の刻み幅）の値を定義します。
type日時フィールドのフォーム要素の種類を返します。
value日時フィールドの value 属性の値を定義します。

メソッド

Input Datetime オブジェクトでは、次のメソッドも利用できます。

メソッド説明
stepDown(n)日時フィールドの値を、引数 n で指定した数だけ減少させます。
stepUp(n)日時フィールドの値を、引数 n で指定した数だけ増加させます。

使用例：min プロパティの操作

ここでは、Input Datetime の min プロパティを使ったサンプルを紹介します。ボタンをクリックすると、JavaScript によって日時フィールドの最小値（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 = '最小日時(min): ' + inputDatetime.min;
    function minDateDecrease() {
        inputDatetime.min = '2010-12-31T23:59:59Z';
        divDisplay.textContent = '最小日時(min): ' + inputDatetime.min;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、次のような画面が表示されます。

「最小日時を変更する」ボタンをクリックする前：

HTML DOM Input Datetimeオブジェクトとは？構文・属性・使い方を実例付きで解説

ボタンをクリックした後：

HTML DOM Input Datetimeオブジェクトとは？構文・属性・使い方を実例付きで解説

クリック前は min の値として「2008-12-31T23:59:59Z」が表示されていますが、ボタンをクリックすると JavaScript によって min 属性が「2010-12-31T23:59:59Z」に更新され、表示も切り替わります。このように、DOM オブジェクトのプロパティを介して、フォーム要素の属性を動的に制御できます。

  1. HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説

    HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input

  2. HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

    HTML DOM Timeオブジェクトとは？HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。<time>要素を作成するJavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドにTIMEを指定します。var timeObject = docume