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

HTML DOM Input Dateオブジェクトとは？属性・メソッド・サンプルコードを徹底解説

HTML DOM の Input Date オブジェクトは、type="date" が設定された HTML の <input> 要素を JavaScript から操作するためのオブジェクトです。日付選択フィールドの値の取得・設定、範囲制限など、さまざまな操作を行うことができます。

構文

Input Date オブジェクトを作成する基本的な構文は以下の通りです。

  • type="date" を持つ <input> 要素を作成する
var dateObject = document.createElement("input");
dateObject.type = "date";

主な属性一覧

Input Date オブジェクトでは、以下の属性を利用できます。

属性説明
autocomplete日付フィールドの autocomplete 属性の値を定義します。
autofocusページの初回読み込み時に、日付フィールドへ自動的にフォーカスを当てるかどうかを定義します。
defaultValue日付フィールドのデフォルト値を設定または取得します。
disabled日付フィールドが無効化されているかどうかを定義します。
form日付フィールドを含む親フォームへの参照を返します。
max日付フィールドの max 属性の値を取得または設定します。選択可能な最大日付を制限できます。
min日付フィールドの min 属性の値を取得または設定します。選択可能な最小日付を制限できます。
name日付フィールドの name 属性の値を定義します。
readOnly日付フィールドが読み取り専用かどうかを定義します。
requiredフォーム送信時に、日付フィールドの入力が必須かどうかを定義します。
step日付フィールドの step 属性の値を定義します。日付の移動単位を指定できます。
type日付フィールドのフォーム要素の種類（"date"）を返します。
value日付フィールドの value 属性の値を定義します。

メソッド

Input Date オブジェクトには、日付の値を操作するための以下のメソッドも用意されています。

メソッド詳細
stepDown(n)日付フィールドの値を、引数 n で指定した日数だけ減らします。
stepUp(n)日付フィールドの値を、引数 n で指定した日数だけ増やします。

使用例：Input Date の max プロパティ

ここでは、max プロパティを使って日付フィールドの上限日を取得・変更する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Max</title>
</head>
<body>
<form>
日付を選択： <input type="date" id="date" name="DateSelect" max="2018-12-31">
</form>
<button onclick="getMaxDate()">Change Max Date</button>
<div id="divDisplay"></div>
<script>
   var inputDate = document.getElementById("date");
   var divDisplay = document.getElementById("divDisplay");
   divDisplay.textContent = 'Max of date input: '+inputDate.max;
   function getMaxDate() {
      var oldInputDate = inputDate.max;
      inputDate.max = '2020-12-31';
      divDisplay.textContent = 'Max of date input: '+inputDate.max;
   }
</script>
</body>
</html>

出力結果

このコードを実行すると、以下のような動作になります。

「Change Max Date」ボタンをクリックする前：

初期状態では、max 属性に設定された「2018-12-31」が表示されます。

「Change Max Date」ボタンをクリックした後：

ボタンをクリックすると、JavaScript によって max プロパティが「2020-12-31」に書き換えられ、表示内容も更新されます。

このように、Input Date オブジェクトを使えば、日付フィールドの選択可能な範囲を動的に制御することが可能です。予約システムやスケジュール管理ツールなど、ユーザーに入力できる日付を限定したい場面で非常に役立ちます。

  1. HTML DOMのInput Textオブジェクトとは？基本構文・プロパティ一覧と実例コードを解説

    HTML DOMのInput Textオブジェクトは、<input>要素のうちtype=textが指定された要素に対応するオブジェクトです。テキスト入力欄を表すこのオブジェクトは、新規に作成する場合はcreateElement()メソッドを、既存の要素へアクセスする場合はgetElementById()メソッドを使用します。本記事では、Input Textオブジェクトで利用できる主なプロパティの一覧と、基本的な構文、実際に動作するサンプルコードをわかりやすく解説します。Input Textオブジェクトの主なプロパティInput Textオブジェクトには、以下のようなプロパティが用意

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

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