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

HTML DOM Input Date の value プロパティとは？取得・設定方法を徹底解説

HTML DOM の Input Date の value プロパティは、<input type="date"> 要素の value 属性に格納されている値を文字列として返します。さらに、このプロパティに対して新しい文字列を代入することで、日付の値を動的に変更することも可能です。

構文（Syntax）

value プロパティの基本的な構文は以下のとおりです。

値を取得する場合

inputDateObject.value

この形式では、現在設定されている日付の値が「YYYY-MM-DD」形式の文字列として返されます。

値を設定する場合

inputDateObject.value = 'String'

この形式では、指定した文字列（例：'2024-01-15'）が input date 要素の value 属性に新しい値として設定されます。

サンプルコード（Example）

ここでは、Input Date の value プロパティを使って、日付の値を取得し、ボタンのクリックで新しい値に更新する例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Date Value</title>
</head>
<body>
<form>
<div>
カレンダー： <input type="date" id="dateSelect" value="2015-08-22">
</div>
</form>
<button onclick="changeValue()">値を変更する</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDate = document.getElementById("dateSelect");
    divDisplay.textContent = '現在の値： '+ inputDate.value;
    function changeValue(){
       var currDate = inputDate.value;
       inputDate.value = '1968-02-27';
       divDisplay.textContent = '値を更新しました： '+currDate+' → '+ inputDate.value;
    }
</script>
</body>
</html>

実行結果（Output）

上記のコードを実行すると、次のような出力が得られます。

「値を変更する」ボタンをクリックする前

初期状態では、value 属性に設定されていた「2015-08-22」が表示され、「現在の値： 2015-08-22」というテキストが出力されます。

HTML DOM Input Date の value プロパティとは？取得・設定方法を徹底解説

「値を変更する」ボタンをクリックした後

ボタンをクリックすると、JavaScript の changeValue() 関数が実行され、value プロパティに「1968-02-27」が新しく設定されます。その結果、「値を更新しました： 2015-08-22 → 1968-02-27」というメッセージが画面に表示されます。

HTML DOM Input Date の value プロパティとは？取得・設定方法を徹底解説

まとめ

Input Date の value プロパティを使えば、日付入力フィールドの値を JavaScript から簡単に読み取ったり、書き換えたりできます。日付の値は常に「YYYY-MM-DD」形式の文字列として扱われるため、フォームの初期値設定やユーザー操作に応じた動的な日付変更など、さまざまな場面で活用できる便利なプロパティです。

  1. HTML DOM Input Time の value プロパティとは？取得・設定方法を解説

    HTML DOM の Input Time の value プロパティは、<input type=time> 要素の value 属性に設定されている値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、時刻の値を後から設定（変更）することも可能です。なお、value プロパティで扱われる時刻は「HH:MM」（24時間表記）形式の文字列である点に注意してください。構文value プロパティの基本構文は以下のとおりです。値を取得する場合inputTimeObject.value値を設定する場合inputTimeObject.value = 文字列サンプルコー

  2. HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Input URL value プロパティは、type=url が指定された input 要素の value 属性が定義されている場合に、その値を文字列として返します。さらに、新しい文字列を代入することで、ユーザー側から値を設定（変更）することも可能です。 構文 value プロパティの構文は以下のとおりです。 値を取得する場合 inputURLObject.value 値を設定する場合 inputURLObject.value = 文字列 使用例 Input URL value プロパティの具体的な使い方を、サンプルコードで確認してみましょう。 <!DOCTYPE