HTML DOM Input DatetimeLocalオブジェクトとは？使い方と主要属性・メソッドを解説

HTML DOMのInput DatetimeLocalオブジェクトは、type="datetime-local"を持つHTMLの<input>要素をJavaScriptから操作するためのオブジェクトです。日付と時刻（ローカルタイムゾーン）をユーザーに入力させるフォーム部品を実装する際に使用されます。

基本的な構文

DOMを使ってdatetime-local型の入力欄を動的に生成するには、以下のように記述します。

var datetimeLocalObject = document.createElement("input");
datetimeLocalObject.type = "datetime-local";

主な属性一覧

Input DatetimeLocalオブジェクトでは、以下の属性を取得・設定できます。

属性	説明
autocomplete	datetime-localフィールドのautocomplete属性の値を定義します。ブラウザの自動補完の挙動を制御できます。
autofocus	ページの初回読み込み時に、このフィールドへ自動的にフォーカスを当てるかどうかを定義します。
defaultValue	datetime-localフィールドのデフォルト値を設定または取得します。
disabled	datetime-localフィールドが無効化されているか（操作できない状態か）どうかを定義します。
form	そのdatetime-localフィールドを含む親フォームへの参照を返します。
max	datetime-localフィールドに入力できる最大の日時を示すmax属性の値を取得または設定します。
min	datetime-localフィールドに入力できる最小の日時を示すmin属性の値を取得または設定します。
name	datetime-localフィールドのname属性の値を定義します。フォーム送信時のパラメータ名として使われます。
readOnly	datetime-localフィールドが読み取り専用かどうかを定義します。
required	フォーム送信時にこのフィールドの入力が必須かどうかを定義します。
step	datetime-localフィールドのstep属性の値を定義します。入力値の間隔（分単位など）を制御できます。
type	フォーム要素の種類を表す文字列を返します。この場合は「datetime-local」です。
value	datetime-localフィールドのvalue属性の値を定義します。現在の入力値の取得や設定に利用できます。

主なメソッド

datetime-localフィールドの値を増減させるためのメソッドも用意されています。

メソッド	説明
stepDown()	引数に指定した分数だけ、datetime-localフィールドの値を減少させます。
stepUp()	引数に指定した分数だけ、datetime-localフィールドの値を増加させます。

活用のポイント

これらの属性やメソッドを組み合わせることで、例えば「予約フォームで過去の日付を選択できないようにする（min属性）」「ボタンクリックで入力時刻を15分ずつ調整する（stepUp／stepDown）」といったインタラクティブなUIを、JavaScriptだけで柔軟に実装することが可能になります。

HTML DOM Input DatetimeLocalのreadOnlyプロパティ徹底解説

HTML DOM 入力日時（datetime-local）のnameプロパティとは？使い方を解説

HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説
HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意
HTML DOM 入力パスワード（Input Password）オブジェクトとは？使い方を解説
HTML DOM 入力パスワードオブジェクトとはHTML DOM の入力パスワード（Input Password）オブジェクトは、type属性に「password」が指定された <input> 要素に関連付けられたオブジェクトです。パスワード入力欄として表示されるこの要素は、文字が「●」や「＊」などでマスクされ、第三者から入力内容が見えないようになっています。JavaScript を使ってパスワード入力要素を操作するには、新規に作成する場合は createElement() メソッド、既存の要素へアクセスする場合は getElementById() メソッドを使用します。Input