HTML DOM Input Date の type プロパティとは？使い方をわかりやすく解説
HTML DOM の Input Date オブジェクトが持つ type プロパティは、日付入力フィールド（<input type="date">）の型を取得（return）または設定（set）するためのプロパティです。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりできます。
構文
type プロパティの基本構文は以下の通りです。
値を取得する場合（文字列値を返す）
inputDateObject.type
値を設定する場合（文字列値を代入する）
inputDateObject.type = stringValue
設定できる文字列値
「stringValue」には、以下のような値を指定できます。
| stringValue | 説明 |
|---|---|
| date | 入力タイプが「日付（date）」であることを示します |
| radio | 入力タイプが「ラジオボタン（radio）」であることを示します |
| checkbox | 入力タイプが「チェックボックス（checkbox）」であることを示します |
サンプルコード
それでは、Input Date の type プロパティを使った具体的な例を見てみましょう。このサンプルでは、ボタンをクリックすると入力フィールドの型が「date」から「text」に切り替わります。
<!DOCTYPE html>
<html>
<head>
<title>Input Date type</title>
</head>
<body>
<form>
<div>
Calendar: <input type="date" id="dateSelect" value="2017-05-01">
</div>
</form>
<button onclick="changeType()">Change Type</button>
<div id="divDisplay"></div>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputDate = document.getElementById("dateSelect");
divDisplay.textContent = 'Input type: '+ inputDate.type;
function changeType(){
if(inputDate.type === 'date'){
var currDate = inputDate.value;
inputDate.type = 'text';
inputDate.value = currDate;
}
divDisplay.textContent = 'Input type: '+ inputDate.type;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、以下のように表示されます。
「Change Type」ボタンをクリックする前：
初期状態では入力フィールドの型が「date」であるため、画面に「Input type: date」と表示され、カレンダー形式の日付入力欄が表示されます。
「Change Type」ボタンをクリックした後：
ボタンをクリックすると、type プロパティによって型が「text」に変更され、「Input type: text」と表示が切り替わり、入力欄も通常のテキストフィールドに変わります。
-
HTML DOM Input Time の type プロパティとは？使い方とサンプルコードを解説
HTML DOM の Input Time type プロパティは、<input type=time> 要素の type 属性の値を取得または設定するために使用されます。このプロパティを使うことで、JavaScript から動的に入力フィールドの種類を確認したり変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 type の値を取得する場合 inputTimeObject.type type に値を設定する場合 inputTimeObject.type = stringValue 指定できる文字列値（stringValue） stri
-
HTML DOM Input Week の type プロパティとは？使い方を解説
はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した