HTML DOM Input DatetimeLocal valueプロパティの使い方を解説
HTML DOM の Input DatetimeLocal value プロパティは、type="datetime-local" の入力フィールドにおける value 属性の値を文字列として返します。さらに、このプロパティに対して新しい文字列を代入することで、日時の値を動的に変更することも可能です。
構文
value プロパティの構文は以下の通りです。
値を取得する場合（文字列を返す）
inputDatetimeLocalObject.value
値を設定する場合（文字列を代入）
inputDatetimeLocalObject.value = '文字列'
サンプルコード
それでは、Input DatetimeLocal value プロパティの具体的な使用例を見ていきましょう。
<!DOCTYPE html>
<html>
<head>
<title>Input DatetimeLocal value</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Datetime-Local-value</legend>
<label for="datetimeLocalSelect">Examination Date-Time :
<input type="datetime-local" id="datetimeLocalSelect" value="2022-10-29T09:30">
</label>
<input type="button" onclick="updateValue()" value="Not Ready For Examination">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDatetimeLocal = document.getElementById("datetimeLocalSelect");
function updateValue() {
inputDatetimeLocal.value = '2022-11-02T09:30';
divDisplay.textContent = 'New Examination Date: '+(inputDatetimeLocal.value).split('T')[0];
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
「Not Ready For Examination」ボタンをクリックする前
初期状態では、入力フィールドに 2022-10-29T09:30 という日時が設定されて表示されます。
「Not Ready For Examination」ボタンをクリックした後
ボタンをクリックすると、value プロパティによって日時が 2022-11-02T09:30 に更新され、画面には新しい試験日「New Examination Date: 2022-11-02」が表示されます。ここでは split('T')[0] を使って、日付部分のみを取り出している点にも注目してください。
まとめ
Input DatetimeLocal の value プロパティを使えば、日時入力フィールドの値を JavaScript から自由に取得・設定できます。フォームの初期値を動的に変更したい場合や、ユーザーの操作に応じて日時を自動更新したい場合などに非常に便利なプロパティです。なお、設定する文字列は「YYYY-MM-DDThh:mm」形式に従う必要がある点に注意しましょう。
-
HTML DOM Input Week の value プロパティの使い方を解説
Input Week の value プロパティとはHTML DOM の Input Week value プロパティは、<input type=week> で作成された入力フィールドの value 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティに新しい文字列を代入することで、週の値を動的に変更することも可能です。value の値は「YYYY-Www」という形式（例：2021-W35）で表され、年と、その年の何週目にあたるかを組み合わせた文字列になります。構文value プロパティの基本的な構文は以下のとおりです。値を取得する（文字列を返す）inp
-
HTML DOM Input Number value プロパティとは？取得・設定方法を解説
HTML DOM の Input Number value プロパティは、type=number を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、input 要素の value 属性の値を取得したり、設定したりすることができます。要素の初期値（デフォルト値）を指定する目的でも活用され、ユーザーが入力を行うとその値に更新されます。 構文 value プロパティの構文は以下の通りです。 値を設定する場合 numberObject.value = number; ここで number には、数値フィールドに設定したい値を指定します。 サンプルコ