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

HTML DOM 入力日時（Input Datetime）の type プロパティの使い方を解説

HTML DOM の Input Datetime type プロパティは、日時入力フィールド（<input type="datetime">）の type 属性を取得または設定するためのプロパティです。このプロパティを参照することで、対象の入力要素が現在どの入力タイプを持っているのかを文字列として確認できます。

構文

type プロパティの基本構文は以下の通りです。

文字列値を取得する場合

inputDatetimeObject.type

type に文字列値を設定する場合

inputDatetimeObject.type = stringValue

設定できる文字列値

stringValue には、以下の値を指定することができます。

stringValue説明
date入力タイプが「日付」であることを表します
datetime入力タイプが「日時」であることを表します
checkbox入力タイプが「チェックボックス」であることを表します
text入力タイプが「テキスト」であることを表します

サンプルコード

それでは、Input Datetime type プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input Datetime type</title>
</head>
<body>
<form>
<div>
生年月日： <input type="datetime" id="datetimeSelect" value="2000-09-17T19:22Z">
</div>
</form>
<button onclick="changeType()">Get Time and Date</button>
<div id="divDisplay"></div>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputDatetime = document.getElementById("datetimeSelect");
   divDisplay.textContent = 'Input type: '+ inputDatetime.type;
   function changeType(){
      if(inputDatetime.type === 'text'){
         var currDate = inputDatetime.value.split("T")[0];
         var currTime = inputDatetime.value.split("T")[1];
      }
      divDisplay.textContent = 'Input Date: '+ currDate+', Input Time: '+currTime;
   }
</script>
</body>
</html>

実行結果

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

「Get Time and Date」ボタンをクリックする前

HTML DOM 入力日時（Input Datetime）の type プロパティの使い方を解説

ページ読み込み時に、スクリプトによって入力要素の type が画面に表示されます。

「Get Time and Date」ボタンをクリックした後

HTML DOM 入力日時（Input Datetime）の type プロパティの使い方を解説

ボタンをクリックすると、入力値から日付部分と時刻部分がそれぞれ分割されて表示されます。

補足：datetime 型の非推奨について

<input type="datetime"> は現在の HTML 仕様では非推奨（廃止予定）となっており、モダンブラウザの多くはサポートしていません。新規の開発では、タイムゾーン情報を持たない datetime-local 型を使用することが推奨されています。type プロパティ自体は他の入力タイプでも同様に利用できるため、フォームの動的な制御に幅広く活用できます。

  1. HTML DOM Input Week の type プロパティとは？使い方を解説

    はじめにHTML DOM の Input Week type プロパティは、週（week）型入力フィールドの type 属性を取得・設定するためのプロパティです。このプロパティを使うことで、JavaScript から対象の入力要素がどの種類（type）であるかを確認したり、別の type 値に変更したりすることができます。 構文 type プロパティの基本的な構文は以下の通りです。 値を取得する場合 inputWeekObject.type 要素の type 属性の現在値が文字列として返されます。 値を設定する場合 inputWeekObject.type = stringValue 指定した

  2. HTML DOM Input Number type プロパティとは？使い方をわかりやすく解説

    HTML DOM の Input Number type プロパティは、type 属性が「number」に設定された input 要素に関連付けられたプロパティです。このプロパティは、数値入力フィールド（<input type=number>）に対して常に文字列「number」を返します。JavaScript でフォーム要素の種類を動的に確認したい場合などに役立ちます。 構文 Input Number type プロパティの構文は以下のとおりです。 numberObject.type サンプルコード HTML DOM Input Number type プロパティの具体的な使用