【HTML Living Standard】datetime-local属性値の使い方
datetime-local属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
datetime-local定数は、HTMLの<input>要素のtype属性に指定する値です。この定数を設定すると、Webブラウザはユーザーが日付と時刻の両方を直感的に選択できる専用の入力UIを提供します。カレンダーや時計のようなウィジェットを通じて、年、月、日、時、分などを容易に入力でき、手動入力の手間を省くことができます。
datetime-localで扱われる日時は、タイムゾーン情報を含まないローカルな日時です。フォームが送信される際には、選択された値はYYYY-MM-DDThh:mm形式（例: 2023-10-27T10:30）の文字列として渡されます。サーバーサイドで日時を処理する際は、それがどのタイムゾーンに属するのかを開発者が別途考慮することが重要です。
min属性とmax属性を使用することで、入力可能な日時範囲を制限できます。これは、Webアプリケーションでユーザーに日付と時刻の両方を効率的に入力させたい場合に有用な定数です。
構文(syntax)
1<input type="datetime-local" value="YYYY-MM-DDTHH:MM">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのdatetime-localで日時を選択する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>日時ローカル選択のサンプル</title> 7</head> 8<body> 9 <h1>イベント日時設定</h1> 10 <form action="#" method="post"> 11 <label for="meeting-datetime">会議の日時を選択してください:</label> 12 <!-- 13 type="datetime-local" は、ユーザーが日付と時刻をローカルタイムゾーンで選択できる入力フィールドを作成します。 14 時刻の入力は通常24時間形式で表示されます。 15 --> 16 <input type="datetime-local" id="meeting-datetime" name="meeting-datetime"> 17 <br><br> 18 <button type="submit">送信</button> 19 </form> 20</body> 21</html>
このサンプルコードは、ウェブページ上でユーザーに日付と時刻をまとめて選択してもらうための入力フィールドを作成する方法を示しています。
特に重要な部分は、<input type="datetime-local" ...>という記述です。ここでtype属性の値としてdatetime-localを指定することで、ブラウザはユーザーが日付と時刻を一度に、かつ直感的に選択できる特別な入力インターフェース（カレンダーと時計のようなもの）を表示します。これにより、ユーザーはテキストを手入力するよりも簡単に、正確な日時を指定できるようになります。
この入力フィールドは、ユーザーのデバイスが設定しているローカルタイムゾーンに基づいて日付と時刻を提供します。また、時刻の表示形式は通常「24時間形式」で表示されます。例えば、午後3時を「15:00」と表示することで、午前・午後の誤解を防ぎ、システム側でデータとして処理する際にも一貫性があり扱いやすくなっています。
datetime-localはinput要素のtype属性の値であり、それ自体に直接的な「引数」や「戻り値」という概念はありません。ユーザーが入力フィールドで選択した日付と時刻の値は、フォームが送信される際にname属性（この例ではmeeting-datetime）で指定された名前とともにサーバーへ渡されます。これにより、イベントの予約、会議のスケジュール設定、タスクの期限指定など、具体的な日時情報が必要なアプリケーションで広く利用できます。
type="datetime-local"は、ユーザーが日付と時刻をローカルタイムゾーンで選択できる便利な入力フィールドですが、ブラウザによって表示や動作が異なる点に注意が必要です。特に古いブラウザでは通常のテキスト入力として表示される場合があるため、ユーザー体験を考慮し、JavaScriptライブラリなどによる代替手段の検討も推奨されます。時刻の入力は通常24時間形式で表示されますので、利用者への案内を考慮してください。フォーム送信時には、選択された値がYYYY-MM-DDTHH:mmのようなISO 8601形式の文字列としてサーバーに送られます。サーバー側でこの形式を適切に処理する準備が必要です。国際的なシステムでは、ローカルタイムゾーンでの選択だけでなく、サーバー側でのタイムゾーン処理やUTC（協定世界時）への変換も検討すると良いでしょう。
HTMLで日付と時刻を選択する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML datetime-local サンプル</title> 7</head> 8<body> 9 <h1>日付と時刻の選択</h1> 10 11 <form> 12 <label for="event-datetime">イベント日時:</label> 13 <!-- 14 datetime-local は、日付と時刻（年、月、日、時、分）を選択するための入力フィールドを作成します。 15 秒単位の指定や表示には標準では対応していません。 16 ブラウザによって表示されるUIは異なります。 17 --> 18 <input type="datetime-local" id="event-datetime" name="event-datetime"> 19 <br><br> 20 <button type="submit">送信</button> 21 </form> 22</body> 23</html>
HTMLのdatetime-localは、ウェブページ上でユーザーが日付と時刻（年、月、日、時、分）を直感的に選択できる入力フィールドを作成するために使用されます。これは、<input>要素のtype属性に"datetime-local"を指定することで利用します。この属性値自体には、プログラミング言語の関数のような「引数」や「戻り値」という明確な概念は適用されません。ユーザーが入力した日付と時刻の値が、フォーム送信時にデータとして扱われる仕組みです。
datetime-localの入力フィールドは、標準では秒単位の指定や表示には対応していません。そのため、イベントの開始日時など、秒単位の厳密な精度が求められない場面での利用に適しています。また、この入力フィールドの見た目や操作方法は、使用するウェブブラウザやそのバージョンによって異なる場合があります。
提供されたサンプルコードでは、<input type="datetime-local" id="event-datetime" name="event-datetime">という形で、イベントの日時を選択するための入力欄が配置されています。これにより、ユーザーはブラウザが提供するカレンダーや時刻選択のインターフェースを使って、手軽に日付と時刻を入力し、フォームを送信することができます。
input type="datetime-local"は、年、月、日、時、分を選択する入力フィールドを作成します。しかし、標準では秒単位の指定や表示には対応していませんので注意が必要です。もし秒単位の情報が必要な場合は、JavaScriptなどを利用して別途処理を実装する必要があります。また、この入力フィールドの見た目（UI）はブラウザやOSによって異なるため、開発時には複数の環境で表示を確認することが重要です。全てのユーザーに一貫したUIを提供したい場合は、CSSでスタイルを調整したり、より柔軟な日付時刻ピッカーライブラリの利用を検討すると良いでしょう。