HTML <input type="datetime-local"> 属性値

試してみましょう

<label for="meeting-time">Choose a time for your appointment:</label>

<input
  type="datetime-local"
  id="meeting-time"
  name="meeting-time"
  value="2018-06-12T19:30"
  min="2018-06-07T00:00"
  max="2018-06-14T00:00" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

このコントロールの UI は一般的にブラウザーによって異なります。このコントロールは、ローカルの日付と時刻を意図通りに表示しますが、必ずしもユーザーの地域の日付と時刻を表示するわけではありません。言い換えれば、この入力フィールドは、ユーザーの地域のタイムゾーンでは不正な組み合わせ（夏時間の切り替え移行期間の 1 時間など）であっても、年、月、日、時、分を任意に組み合わせることができます。

値

入力欄に入力された日付の値を表す文字列です。この入力型で使われる日付と時刻の値の形式は、ローカル日時文字列で説明されています。

次のように、 value 属性に日付と時刻を入れることで、入力欄のデフォルト値を設定することができます。

<label for="party">パーティーを予約する日時を入力してください。</label>
<input
  id="party"
  type="datetime-local"
  name="party-date"
  value="2017-06-01T08:30" />

一点気を付けなければならないことは、表示される日付と時刻の書式は実際の value とは異なることです。表示される日付と時刻は、オペレーティングシステムからの報告に従ってユーザーのロケールによって書式化されますが、日付や時刻の value は常に YYYY-MM-DDTHH:mm の書式です。例えば、上記の値をサーバーに送信すると、 party-date=2024-06-01T08:30 のようになります。

次のように、 JavaScript で HTMLInputElement の value プロパティを使用して日付の値を取得したり設定したりすることもできます。

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = "2017-06-01T08:30";

追加の属性

すべての <input> 要素で共通する属性に加え、 datetime-local 型の入力欄は次の属性にも対応しています。

max

受け付ける最新の日時です。要素に入力された value がこのタイムスタンプよりも後の場合、要素は制約検証に失敗します。 max 属性の値が YYYY-MM-DDTHH:mm の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。

この値は min 属性で指定されたものより後か、同じ日付を指定する必要があります。

min

受け付ける最古の日時です。これより前のタイムスタンプの場合、要素は制約検証に失敗します。 min 属性の値が YYYY-MM-DDTHH:mm の書式に従う妥当な文字列でない場合、要素は最小値を持ちません。

この値は max 属性で指定されたものより前か、同じ日付を指定する必要があります。

step

step 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 any です。段階の基準値から整数倍の差がある値のみが有効です。段階の基準値は、指定されている場合は min、指定されていない場合は value、どちらも指定されていない場合は 0（Unix 元期、1970-01-01T00:00）となります。

datetime-local 型の入力の場合、step の値は秒単位で指定され、step の値の 1000 倍に相当するミリ秒数として扱われます（内部の数値はミリ秒単位です）。デフォルト値は 60 で、これは 1 分を示します。

文字列値の any は、刻みがなく、どの値でも許可されることを意味します（min や max など、他の制約には制限されます）。実際には、datetime-local 形式の入力の場合、このピッカー UI では分単位でしか選択できないため、60 を入力したのと同じ効果になります。

datetime-local 入力の使用

日時入力欄は開発者にとって便利なもので、日時を簡単に選べますし、ユーザーのロケールに関係なくサーバーに送信されるデータ形式を標準化できます。しかし、ユーザーのことを考慮することも重要です。アプリの機能として必要のないデータをユーザーに入力させることは避けましょう。

入力欄の大きさの制御

<input type="datetime-local"> は、 size のようなコントロールの大きさに関する属性には対応していません。大きさを変更する必要がある場合は、 CSS を使用する必要があります。

タイムゾーンの設定

datetime-local 入力型はコントロールのタイムゾーンやロケールを設定する方法がありません。これは datetime 入力型では利用できましたが、この入力型は廃止され、仕様書から削除されました。削除された主な理由はブラウザーの互換性がなく、ユーザーインターフェイスや使い勝手が決まっていなかったからです。単に日付と時刻を設定するコントロールを用意して、別なコントロールで地域を設定したほうが簡単です。

例えば、ユーザーがログインしている場所によって地域を設定するようなシステムを開発する場合、タイムゾーンを hidden 入力型で次のように提供することができます。

<input type="hidden" id="timezone" name="timezone" value="-08:00" />

一方、ユーザーに日時入力と共にタイムゾーンを入力できるようにする必要がある場合、 <select> 要素などでタイムゾーンを入力する手段を提供することができます。

<select name="timezone" id="timezone">
  <option value="Pacific/Kwajalein">Eniwetok, Kwajalein</option>
  <option value="Pacific/Midway">Midway Island, Samoa</option>
  <option value="Pacific/Honolulu">Hawaii</option>
  <option value="Pacific/Marquesas">Taiohae</option>
  <!-- and so on -->
</select>

どちらの場合も、日時の値とタイムゾーンの値はサーバーに別々のデータポイントとして送信されるため、サーバー側のデータベースに適切に格納する必要があります。

検証

デフォルトでは、 <input type="datetime-local"> は入力された値の検証を行いません。ユーザーインターフェイスの実装は一般的に、日付でないものの入力をさせないからです。これは便利です。しかし、それでも入力欄を空のままにしたり、 (text 型にフォールバックするブラウザーにおいて) 無効な日付 (例えば 4 月 32 日など) を入力したりすることが可能です。

min および max を使用して有効な日付を制限したり (日付の最大値と最小値の設定を参照)、 required 属性を使用して日時の入力を必須にしたりすることができます。その結果、ブラウザーでは、範囲を外れた日付や空の日付欄を送信しようとするとエラーが表示されるでしょう。

例を見てみましょう。ここで日付の最小値と最大値を設定し、入力欄を必須にしました。

<form>
  <div>
    <label for="party">
      希望するパーティーの日時を選択して下さい (必須、 6 月 1 日午前 8:30 ～ 6
      月 30 日午後 4:30)
    </label>
    <input
      id="party"
      type="datetime-local"
      name="party-date"
      min="2017-06-01T08:30"
      max="2017-06-30T16:30"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="予約する！" />
  </div>
</form>

不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。

上の例で使用している CSS を示します。ここでは :valid と :invalid を使用しています。 CSS のプロパティを使用して、現在の値が有効かどうかに基づいて入力をスタイル設定しています。アイコンは、入力欄の隣の <span> に配置します。

div {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

label {
  display: inline-block;
  width: 300px;
}

input:invalid + span::after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  content: "✓";
  padding-left: 5px;
}

例

datetime-local の基本的な使用

最も単純な <input type="datetime-local"> の使用方法は、下記のように基本的な <input> と <label> 要素の組み合わせることです。

<form>
  <label for="party">パーティーを予約する日時を入力してください:</label>
  <input id="party" type="datetime-local" name="party-date" />
</form>

日時の最大値および最小値の設定

min および max 属性を使用することで、ユーザーが選べる日時を制限することができます。次の例では、日時の最小値を 2025-06-01T08:30、最大値を 2025-06-30T16:30 に設定しています。

<form>
  <label for="party">パーティーを予約する日時を入力してください:</label>
  <input
    id="party"
    type="datetime-local"
    name="party-date"
    min="2025-06-01T08:30"
    max="2025-06-30T16:30" />
</form>

2025 å¹´ 6 月中の日のみ選択可能です。ブラウザーによって、指定した値以外の時刻は選択できないようになっているもの、有効な日時は選択可能ですが、 :invalid と :out-of-range に一致し、検証に失敗するものがあります。

一部のブラウザー（Safari）では、日付ピッカーはどの日付でも選択できるように現れますが、日付が選択されると値は有効な範囲に固定されます。

有効な範囲には min と max の値の間のすべての時刻が含まれます。時刻は範囲内の最初の日と最後の日でのみ制約されます。

技術的概要

仕様書

ブラウザーの互換性

関連情報

• 全般的な <input> およびその操作に使用する HTMLInputElement インターフェイス
• <input type="date"> および <input type="time">
• HTML で使われる日付や時刻の形式
• 日付と時刻の選択のチュートリアル