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

HTMLのdatetime-local入力タイプで日時を入力・送信する方法

datetime-local入力タイプとは

HTMLでは、<input type="datetime-local"> を使用することで、ユーザーが日付と時刻を選択できる入力フィールドを作成できます。この入力フィールドがクリックされると、日時を選択するためのピッカー(カレンダー形式のポップアップ)が表示され、マウス操作だけで直感的に日時を指定できます。

type="datetime-local" で送信される値は、「YYYY-MM-DDThh:mm」(例：2025-06-15T14:30)という形式になります。タイムゾーン情報は含まれない点に注意してください。

実装サンプル

以下は、学生の氏名と試験の日時を入力して送信する簡単なフォームの例です。

<!DOCTYPE html>
<html>
    <head>
        <title>HTML input datetime</title>
    </head>
    <body>
        <form action = "" method = "get">
            詳細情報:<br><br>
            学生の氏名<br><input type = "text" name = "sname"><br>
            試験の日時<br><input type = "datetime-local" name = "datetime"><br>
            <input type = "submit" value = "送信">
        </form>
    </body>
</html>

ポイント解説

  • <input type="datetime-local" name="datetime"> の部分が、日時入力フィールドを生成しています。
  • 氏名の入力欄には、テキスト入力用に type="text" を使用します(type="name" は有効な値ではないため注意)。
  • min 属性や max 属性を追加すると、選択可能な日時の範囲を制限できます。
  • required 属性を付けると、未入力のまま送信することを防げます。

なお、ブラウザによってピッカーの見た目や操作性は異なりますが、主要なモダンブラウザ(Google Chrome、Edge、Firefox、Safariなど)では datetime-local がサポートされています。対応していない環境では、通常のテキスト入力欄として表示されるため、プレースホルダーなどで入力形式を案内しておくと親切です。

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

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

  2. HTML input value属性とは？値の設定・取得方法をサンプルコードで解説

    HTML input value属性とは HTMLのinput要素におけるvalue属性は、フォーム部品の値を設定・取得するために使用される属性です。JavaScriptからは、このvalueプロパティを通じて、入力欄の現在の値を取得（return）したり、新しい値を動的に設定（set）したりすることができます。 value属性は、テキスト入力欄やURL入力欄、ボタンなどさまざまな種類のinput要素で利用でき、JavaScriptと組み合わせることで、ユーザーの操作に応じた動的なフォーム制御が可能になります。 input valueプロパティの基本構文 値を取得する場合： inputObj