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

HTML DOM Input Datetime の value プロパティの使い方を解説

HTML DOM の Input Datetime の value プロパティは、datetime 型入力フィールドの value 属性の値を文字列として取得します。また、新しい文字列を代入することで値を設定することも可能です。

構文

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

値を取得する場合

inputDatetimeObject.value

値を設定する場合

inputDatetimeObject.value = '文字列'

サンプルコード

Input Datetime の value プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime Value</title>
</head>
<body>
<form>
<div>
日時： <input type="datetime" id="datetimeSelect" value="2015-08-22T16:24Z">
</div>
</form>
<button onclick="changeValue()">値を変更する</button>
<div id="divDisplay"></div>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputDatetime = document.getElementById("datetimeSelect");
    divDisplay.textContent = '現在の値： '+ inputDatetime.value;
    function changeValue(){
        var currDatetime = inputDatetime.value;
        inputDatetime.value = '2017-03-17T16:24Z';
        divDisplay.textContent = '値が '+currDatetime+' から '+ inputDatetime.value+' に更新されました';
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような出力が得られます。

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

HTML DOM Input Datetime の value プロパティの使い方を解説

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

HTML DOM Input Datetime の value プロパティの使い方を解説

ボタンをクリックすると、JavaScript の changeValue() 関数が呼び出され、入力フィールドの値が「2015-08-22T16:24Z」から「2017-03-17T16:24Z」へ更新されます。同時に、変更前と変更後の値が画面上に表示される仕組みです。

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

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

  2. HTML DOM Input Week の value プロパティの使い方を解説

    Input Week の value プロパティとはHTML DOM の Input Week value プロパティは、<input type=week> で作成された入力フィールドの value 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、週の値を動的に変更することも可能です。value の値は「YYYY-Www」という形式（例：2021-W35）で表され、年と、その年の何週目にあたるかを組み合わせた文字列になります。構文value プロパティの基本的な構文は以下のとおりです。値を取得する（文字列を返す）inp