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

HTMLで日時入力タイプ（datetime-local）を使う方法を徹底解説

HTMLにおける日時入力タイプとは

HTMLでは、<input type="datetime-local"> を使用することで、日時入力タイプを実装できます。この入力タイプを利用すると、ユーザーが日付と時刻を簡単に選択できるようになります。入力フィールドをクリックすると、日時を選択するためのピッカー（ポップアップカレンダー）が自動的に表示されるのが特徴です。

注意： 従来の input type="datetime" は、Firefox や Internet Explorer ではサポートされていません。動作が確認されているのは Google Chrome などの一部のブラウザに限られます。そのため、現在ではより互換性の高い datetime-local の使用が推奨されています。

HTMLで日時入力タイプ（datetime-local）を使う方法を徹底解説

実装サンプル

以下のコードを実行すると、HTMLで日時入力タイプを使用する方法を実際に確認できます。試験の日時を入力するシンプルなフォームの例です。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input datetime</title>
   </head>
   <body>
      <form action = "" method = "get">
         Details:<br><br>
         Student Name<br><input type="name" name="sname"><br>
         Exam Date and Time<br><input type="datetime-local" name="datetime"><br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

ポイントまとめ

  • 日時の同時入力には <input type="datetime-local"> を使用する
  • フィールドをクリックすると日時ピッカーが表示され、直感的に操作できる
  • 古い type="datetime" はブラウザ対応が限られるため非推奨
  • 未対応ブラウザでは通常のテキスト入力にフォールバックされるため、必要に応じてJavaScript製のカレンダーライブラリを併用するとよい
  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

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

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