From f79251915a5f48370cce2bdb9253868518ec3869 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 9 Feb 2022 00:19:22 +0900 Subject: 2021/10/03 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../html/element/input/datetime-local/index.html | 638 ++++++++++----------- 1 file changed, 300 insertions(+), 338 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/html/element/input/datetime-local/index.html b/files/ja/web/html/element/input/datetime-local/index.html index e5340a072c..e899c0d822 100644 --- a/files/ja/web/html/element/input/datetime-local/index.html +++ b/files/ja/web/html/element/input/datetime-local/index.html @@ -2,243 +2,226 @@ title: slug: Web/HTML/Element/input/datetime-local tags: - - Date - - Date and Time - - Element + - 日付 + - 日付と時刻 + - 要素 - Form input - HTML - - HTML forms + - HTML フォーム - Input - - Input Element - - Input Type - - Reference - - Time + - 入力要素 + - 入力型 + - リファレンス + - 時刻 - datetime-local +browser-compat: html.elements.input.input-datetime-local translation_of: Web/HTML/Element/input/datetime-local --- -
{{HTMLRef("Input_types")}}
-

{{HTMLElement("input")}} 要素の datetime-local 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。

+{{HTMLRef("Input_types")}} -
{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}
+{{HTMLElement("input")}} 要素の **`datetime-local`** 型は、ユーザーが簡単に日付と時刻、つまり年、月、日と時、分を入力することができる入力コントロールを生成します。ユーザーのローカルタイムゾーンが使用されます。 - +{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}} -

コントロールのユーザーインターフェイスは、一般にブラウザーによってまちまちです。現時点で対応は不安定で、 Chrome/Opera とデスクトップ版の Edge、それに最新版のモバイルブラウザーが有用な実装をしています。他のブラウザーでは、このコントロールは単純な <input type="text"> に格下げされます。

+コントロールのユーザーインターフェイスは、ブラウザーが対応していない場合、このコントロールは単純な [``](/ja/docs/Web/HTML/Element/input/text) に格下げされます。 -

このコントロールは単純にローカルの日付と時刻を表現するためのものであって、ユーザーのローカルの日付と時刻を示すとは限りません。言い換えれば、実装では有効な年、月、日、時、分をすべて、仮にその組み合わせがユーザーのタイムゾーンで無効であったとしても (春の夏時間への移行ギャップなど)、許可するべきです。一部のモバイルブラウザーは (特に iOS のものは) これを正しく実装していません。

+このコントロールは単純に*ローカルの日付と時刻*を表現するためのものであって、*ユーザーのローカルの日付と時刻*を示すとは限りません。言い換えれば、実装では有効な年、月、日、時、分をすべて、仮にその組み合わせがユーザーのタイムゾーンで無効であったとしても (春の夏時間への移行ギャップなど)、許可するべきです。一部のモバイルブラウザーは (特に iOS のものは) これを正しく実装していません。 -

datetime-local は限られたブラウザーしか対応しておらず、入力欄の動作が様々であるため、現在はこれを表示するためにフレームワークやライブラリを使用するか、独自のカスタム入力欄をした方が良いかもしれません。また、 date と time の入力欄を別々に使用すると、 datetime-local よりも対応が広くなります。

+`datetime-local` は限られたブラウザーしか対応しておらず、入力欄の動作が様々であるため、現在はこれを表示するためにフレームワークやライブラリを使用するか、独自のカスタム入力欄をした方が良いかもしれません。また、 `date` と `time` の入力欄を別々に使用すると、 `datetime-local` よりも対応が広くなります。 -

一部のブラウザーでは、テキストのみの入力要素を表示し、結果をサーバーに送信する前に妥当な日付/時刻値であることを検証するものもありますが、予期しない動作をすることがあるので、この動作に頼るべきではありません。

- -

対応していないブラウザーを使っている人向けに、 Chrome や Opera の datetime-local コントロールは以下のスクリーンショットのようになります。右端の下向きの矢印をクリックすると、日付を選択するための日付選択画面が現れます。時刻は手入力する必要があります。

- -

- -

Edge の datetime-local コントロールは以下のような外見です。日付および時刻のぶぶんの値をクリックすると、2つの別々な選択画面が現れますので、簡単に日付と時刻を設定できます。これは date と time のウィジェットを両方作成して、一つにまとめたようなものです。

- -

- -

+一部のブラウザーでは、テキストのみの入力要素を表示し、結果をサーバーに送信する前に妥当な日付/時刻値であることを検証するものもありますが、予期しない動作をすることがあるので、この動作に頼るべきではありません。 - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value", "値")}}(ローカルタイムゾーンでの) 日付と時刻を表す {{domxref("DOMString")}}、または空欄。
イベント{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}
対応している共通属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}
IDL 属性list, value, valueAsNumber
メソッド{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
{{anch("値")}} + (ローカルタイムゾーンでの) 日付と時刻を表す {{domxref("DOMString")}}、または空欄。 +
イベント + {{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}} +
対応している共通属性 + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("step", "input")}} +
IDL 属性 + list, value, valueAsNumber. +
メソッド + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}} +
-

値

+## 値 -

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

+入力欄に入力された日付の値を表す {{domxref("DOMString")}} です。この入力型で使われる日付と時刻の値の形式は、[ローカル日時の文字列](/ja/docs/Web/HTML/Date_and_time_formats#local_date_and_time_strings)で説明されています。 -

次のように、 {{htmlattrxref("value", "input")}} 属性に日付と時刻を入れることで、入力欄の既定値を設定することができます。

+次のように、 {{htmlattrxref("value", "input")}} 属性に日付と時刻を入れることで、入力欄の既定値を設定することができます。 -
<label for="party">パーティーを予約する日時を入力してください。</label>
-<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30">
+```html + + +``` -

{{EmbedLiveSample('Value', 600, 60)}}

+{{ EmbedLiveSample('Value', 600, 60) }} -

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

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

注: このようなデータが HTTP の GET を通じて送信されると、コロン文字を URL 引数に含めるために、 partydate=2017-06-01T08%3A30 のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。

-
+> **Note:** このようなデータが HTTP の [`GET`](/ja/docs/Web/HTTP/Methods/GET) を通じて送信されると、コロン文字を URL 引数に含めるために、 `partydate=2017-06-01T08%3A30` のようにエスケープする必要があることもお忘れなく。これを行う方法の一つとして {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} を参照してください。 -

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

+次のように、 JavaScript で {{domxref("HTMLInputElement")}} の `value` プロパティを使用して日付の値を取得したり設定したりすることもできます。 -
var dateControl = document.querySelector('input[type="datetime-local"]');
-dateControl.value = '2017-06-01T08:30';
+```js +var dateControl = document.querySelector('input[type="datetime-local"]'); +dateControl.value = '2017-06-01T08:30'; +``` -

JavaScript の {{jsxref("Date")}} には、数値の日時情報を正しく整形された文字列に変換したり、手動で行ったりするメソッドがいくつかあります。例えば、この用途では {{jsxref("Date.toISOString()")}} メソッドが利用できます。

+JavaScript の {{jsxref("Date")}} には、数値の日時情報を正しく整形された文字列に変換したり、手動で行ったりするメソッドがいくつかあります。例えば、この用途では {{jsxref("Date.toISOString()")}} メソッドが利用できます。 -

追加の属性

+## 追加の属性 -

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

+すべての {{HTMLElement("input")}} 要素で共通する属性に加え、 `datetime-local` 型の入力欄は次の属性にも対応しています。 - - - - - - - - - - - - - - - - - - - - - -
属性説明
{{anch("max")}}受け付ける最新の日時
{{anch("min")}}受け付ける最古の日時
{{anch("step")}}上下の矢印で値を調整する時や、検証を行う時に使用する刻み値
+### max -

{{htmlattrdef("max")}}

+受け付ける最新の日時です。要素に入力された {{htmlattrxref("value", "input")}} がこのタイムスタンプよりも後の場合、要素は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。 `max` 属性の値が `YYYY-MM-DDThh:mm` の書式に従う妥当な文字列でない場合、要素は最大値を持ちません。 -

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

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

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

+### min -

{{htmlattrdef("min")}}

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

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

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

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

+### step -

{{htmlattrdef("step")}}

+`step` 属性は値が吸着する粒度を指定する数値、または後述する特殊な値 `any` です。刻みの基準値に等しい値（指定されていれば `{{anch("min")}}`、そうでなければ {{htmlattrxref("value", "input")}}、どちらも設定されていなければ適切な既定値）のみが妥当となります。 -

{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}

+文字列値の `any` は、刻みがなく、どの値でも許可されることを意味します（`{{anch("min")}}` や `{{anch("max")}}` など、他の制約には制限されます）。 -

datetime-local 入力欄では、 step の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 step の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。

+> **Note:** ユーザーがデータを入力したときには刻みの設定には吸着せず、{{Glossary("user agent", "ユーザーエージェント")}}は直近の妥当な値、同じ距離の値の選択肢が 2 つあった場合は、正の方向の推奨値に丸められます。 -

現時点で、 datetime-local 入力欄で step に any の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。

+`datetime-local` 入力欄では、 `step` の値は秒数で指定され、 1000 が乗じられます (ミリ秒単位の数値であるため)。 `step` の既定値は 60 であり、60秒 (1分、60000ミリ秒) を表します。 -

datetime-local 入力の使用

+_現時点で、 `datetime-local` 入力欄で `step` に `any` の値が何を意味するかが不明確です。これは情報が決定次第、更新されるでしょう。_ -

datetime-local 入力欄は一見すると便利に見えます。簡単に日付と時刻を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 <input type="datetime-local"> には問題があります。

+## datetime-local 入力の使用 -

<input type="datetime-local"> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの対応の扱い")}}を参照してください)。

+日付や時刻の入力欄は一見すると便利に見えます。簡単に日付と時刻を選択するユーザーインターフェイスを提供し、ユーザーのロケールに関係なく、データ形式を正規化してサーバーに送信するからです。しかし、ブラウザーの互換性が限られているため、 `` には問題があります。 -

datetime-local の基本的な使用

+`` の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("ブラウザーの対応の扱い")}}を参照してください)。 -

もっとも単純な <input type="datetime-local"> の使用方法は、次のような基本的な <input> と {{htmlelement("label")}} 要素の組み合わせです。

+### datetime-local の基本的な使用 -
<form>
-    <label for="party">パーティーを予約する日時を入力してください。</label>
-    <input id="party" type="datetime-local" name="partydate">
-</form>
+もっとも単純な `` の使用方法は、次のような基本的な `` と {{htmlelement("label")}} 要素の組み合わせです。 -

{{EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40)}}

+```html +
+    +    +
+``` -

日時の最大値と最小値の設定

+{{ EmbedLiveSample('Basic_uses_of_datetime-local', 600, 40) }} -

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

+### 日時の最大値と最小値の設定 -
  <form>
-    <label for="party">パーティーを予約する日時を入力してください。</label>
-    <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30">
-  </form>
+{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日時を制限することができます。次の例では、日時の最小値を `2017-06-01T08:30` に、日時の最大値を `2017-06-30T16:30` に設定しています。 -

{{EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40)}}

+```html + 
+    +    + 
+``` -

結果は次のようになります。

+{{ EmbedLiveSample('Setting_maximum_and_minimum_dates_and_times', 600, 40) }} - +結果は次のようになります。 -
-

注: {{htmlattrxref("step", "input")}} 属性を使用すると、日時を加算するたびに飛ばす日時を設定できるはずです (例えば、土曜日のみを選択できるようにしたい場合など)。しかし、執筆時点でどの実装も正しく動作していないようです。

-
+- この結果は、 2017 年の 6 月の日付のみが選択できるようになります。文字列値の「日」の部分のみが編集可能となり、日付選択ウィジェットで 6 月以外にスクロールすることはできなくなります。 +- どのブラウザーを使用するかによって、指定された値の範囲外の時刻が時刻選択画面で選択できなかったり (Edge など)、無効な値 ({{anch("検証")}}を参照) であっても設定できたりすることがあります (Chrome など)。 -

入力欄の寸法の制御

+> **Note:** {{htmlattrxref("step", "input")}} 属性を使用すると、日時を加算するたびに飛ばす日時を設定できるはずです (例えば、土曜日のみを選択できるようにしたい場合など)。しかし、執筆時点でどの実装も正しく動作していないようです。 -

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

+### 入力欄の寸法の制御 -

タイムゾーンの設定

+`` は、 {{htmlattrxref("size", "input")}} のようなコントロールの寸法に関する属性には対応していません。寸法を変更する必要がある場合は、 [CSS](/ja/docs/Web/CSS) を使用する必要があります。 -

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

+### タイムゾーンの設定 -

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

+`datetime-local` 入力型はコントロールのタイムゾーンやロケールを設定する方法がありません。これは [`datetime`](/ja/docs/Web/HTML/Element/input/datetime) 入力型では利用できましたが、この入力型は廃止され、仕様書から削除されました。削除された主な理由はブラウザーの互換性がなく、ユーザーインターフェイスや使い勝手が決まっていなかったからです。単に日付と時刻を設定するコントロールを用意して、別なコントロールで地域を設定したほうが簡単です。 -
<input type="hidden" id="timezone" name="timezone" value="-08:00">
+例えば、ユーザーがログインしている場所によって地域を設定するようなシステムを開発する場合、タイムゾーンを [`hidden`](/ja/docs/Web/HTML/Element/input/hidden) 入力型で次のように提供することができます。 -

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

+```html + +``` -
<select name="timezone_offset" id="timezone-offset" class="span5">
-    <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option>
-    <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option>
-    <option value="-10:00">(GMT -10:00) Hawaii</option>
-    <option value="-09:50">(GMT -9:30) Taiohae</option>
-    <option value="-09:00">(GMT -9:00) Alaska</option>
-    <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option>
+一方、ユーザーに日時入力と共にタイムゾーンを入力できるようにする必要がある場合、 {{htmlelement("select")}} 要素などでタイムゾーンを入力する手段を提供することができます。
 
-  ...
+```html
+
+```
 
-</select>
+どちらの場合も、日時の値とタイムゾーンの値はサーバーに別々のデータポイントとして送信されるため、サーバー側のデータベースに適切に格納する必要があります。 -

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

+## 検証 -
-

注: 上記のコードの断片は、HTML select 要素の全世界のタイムゾーンから取得しました。

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

検証

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

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

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

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

+```html +
+   
+        +        +        +   
+   
+        +   
+
+``` -

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

+不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。 -
<form>
-    <div>
-        <label for="party">希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) </label>
-        <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required>
-        <span class="validity"></span>
-    </div>
-    <div>
-        <input type="submit" value="予約する！">
-    </div>
-</form>
+{{ EmbedLiveSample('Validation', 600, 120) }} -

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

+上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。 -

{{ EmbedLiveSample('Validation', 600, 120) }}

- -

対応しているブラウザーで入力しなかった場合のスクリーンショットです。

- -

- -

上記の例の CSS です。 CSS の {{cssxref(":valid")}} および {{cssxref(":invalid")}} プロパティを使用して、現在の値が有効かどうかに基づいてスタイルを設定しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。

- -
div {
+```css
+div {
     margin-bottom: 10px;
     display: flex;
     align-items: center;
@@ -257,59 +240,54 @@ input:invalid+span:after {
 input:valid+span:after {
     content: '✓';
     padding-left: 5px;
-}
- -
-

重要: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。

-
- -

ブラウザーの対応の扱い

+} +``` -

前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの互換性")}}です。デスクトップでは Chrome/Opera と Edge のみが対応しており、モバイルでは多くの最新のブラウザーが対応しています。例えば、 Android 版 Firefox の datetime-local の選択画面はこの例のように表示されます。

+> **Warning:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するスクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、誤った種類のデータなど) が送信された場合に障害が発生するおそれがあります。 -

+## ブラウザーの対応の扱い -

対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。

+前述のように、対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱いの両方で問題を生みます。 -

2番目の問題はより深刻です。すでに述べたように、 datetime-local 入力欄では、実際の値が常に yyyy-mm-ddThh:mm の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは日付がどの書式で入力されるかの認識がなく、以下のように人間が日付と時刻を書く様々な方法で入力される可能性があります。

+2 番目の問題はより深刻です。すでに述べたように、 `datetime-local` 入力欄では、実際の値が常に `YYYY-MM-DDThh:mm` の書式で正規化されます。一方、文字列入力欄では、既定でブラウザーは日付がどの書式で入力されるかの認識がなく、以下のように人間が日付と時刻を書く様々な方法で入力される可能性があります。 - +- `DDMMYYYY` +- `DD/MM/YYYY` +- `MM/DD/YYYY` +- `DD-MM-YYYY` +- `MM-DD-YYYY` +- `MM-DD-YYYY hh:mm` (12 時制) +- `MM-DD-YYYY HH:mm` (24 時制) +- など -

これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付入力欄はこれを使用しないので、 text 入力欄にフォールバックされたときは使用します。例えば、次の例を未対応のブラウザーで見てみてください。

+これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付入力欄はこれを使用しないので、 `text` 入力欄にフォールバックされたときは使用します。例えば、次の例を未対応のブラウザーで見てみてください。 -
<form>
-  <div>
-    <label for="party">希望するパーティーの日時を選択して下さい (必須、6月1日午前8:30～6月30日午後4:30) </label>
-    <input id="party" type="datetime-local" name="partydate"
-           min="2017-06-01T08:30" max="2017-06-30T16:30"
-           pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-    <input type="submit" value="予約する！">
-  </div>
-  <input type="hidden" id="timezone" name="timezone" value="-08:00">
-</form>
+```html +
+ 
+    +   +    + 
+ 
+    + 
+  +
+``` -

{{EmbedLiveSample('Handling_browser_support', 600, 100)}}

+{{EmbedLiveSample('Handling_browser_support', 600, 100)}} -

nnnn-nn-nnTnn:nn のパターン (n は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。

+`nnnn-nn-nnTnn:nn` のパターン (`n` は数字の0から9) に一致しない文字列を入力して送信しようとすると、エラーメッセージが表示される (そして入力欄が無効として強調表示される) のが分かるでしょう。もちろん、これではユーザーが無効な日付を入力したり、誤った形式で日付や時刻を入力したりすることを止めることはできません。 -

また、日付や時刻を入力するパターンをどうやってユーザーに理解させればよいのでしょうか？

+また、日付や時刻を入力するパターンをどうやってユーザーに理解させればよいのでしょうか？ -

まだ問題があります。

+まだ問題があります。 - +} +``` -

ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、現時点では年月日を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 jQuery date picker や jQuery timepicker plugin のような JavaScript ライブラリを使用することです。

+ブラウザーに依存しない方法によってフォームで日付を扱う最善の方法は、現時点では年月日を別々なコントロール ({{htmlelement("select")}} 要素が一般的です。以下の実装を見てください) にするか、 [jQuery date picker](https://jqueryui.com/datepicker/) や [jQuery timepicker plugin](https://timepicker.co/) のような JavaScript ライブラリを使用することです。 -

2038年問題 (主にサーバー側)

+## 2038年問題 (主にサーバー側) -

JavaScript は日付を格納するとき、すべての数値と同様に、倍精度浮動小数点を使用しますので、 JavaScript のコードは整数への変換やビット操作が行われない限り、2038年問題に悩まされることはありません。ビット操作演算は、32ビットの符号付き2の補数で演算を行っているので影響を受ける可能性があります。

+JavaScript は日付を格納するとき、すべての数値と同様に、倍精度浮動小数点を使用しますので、 JavaScript のコードは整数への変換やビット操作が行われない限り、2038 年問題に悩まされることはありません。ビット操作演算は、 32 ビットの符号付き 2 の補数で演算を行っているので影響を受ける可能性があります。 -

問題はサーバー側で、 231-1 よりも大きな日付値を格納する場合です。この問題を解決するには、すべての日付を符号なしの32ビット整数、符号付きの64ビット整数、または倍精度の浮動小数点のいずれかでサーバーに格納する必要があります。サーバーが PHP で書かれている場合は、PHP 8 または 7 にアップグレードし、ハードウェアを x86_64 または IA64 にアップグレードするだけで解決できるかもしれません。他のハードウェアで行き詰っている場合は、32ビット仮想マシン内で64ビットハードウェアをエミュレートすることもできますが、ほとんどの仮想マシンはこの種の仮想化をサポートしていないため、安定性が損なわれ、性能が大きく低下する可能性があります。

+問題はサーバー側で、 2^31-1 よりも大きな日付値を格納する場合です。この問題を解決するには、すべての日付を符号なしの 32 ビット整数、符号付きの 64 ビット整数、または倍精度の浮動小数点のいずれかでサーバーに格納する必要があります。サーバーが PHP で書かれている場合は、PHP 8 または 7 にアップグレードし、ハードウェアを x86_64 または IA64 にアップグレードするだけで解決できるかもしれません。他のハードウェアで行き詰っている場合は、 32 ビット仮想マシン内で 64 ビットハードウェアをエミュレートすることもできますが、ほとんどの仮想マシンはこの種の仮想化をサポートしていないため、安定性が損なわれ、性能が大きく低下する可能性があります。 -

10000年問題 (主にクライアント側)

+## 10000年問題 (主にクライアント側) -

多くのサーバーでは、日付を文字列ではなく数値として保存します。10000年以降は、これらの数字は以前よりも少し大きくなるだけなので、多くのサーバーでは10000年以降をフォームで送信しても問題が発生することはありません。

+多くのサーバーでは、日付を文字列ではなく数値として保存します。 10000 年以降は、これらの数字は以前よりも少し大きくなるだけなので、多くのサーバーでは 10000 年以降をフォームで送信しても問題が発生することはありません。 -

問題はクライアント側の問題です。年に4桁以上の数字を持つ日付の解析です。

+問題はクライアント側の問題です。年に 4 桁以上の数字を持つ日付の解析です。 -
<!--midnight of January 1st, 10000: the exact time of Y10K-->
-<input type="datetime-local" value="+010000-01-01T05:00"/>
+```html + + +``` -

単純なことです。何桁でもいいコードを用意するだけです。5桁の数字だけを用意するのではありません。プログラムで値を設定するための JavaScript のコードを紹介します。

+単純なことです。何桁でもいいコードを用意するだけです。 5 桁の数字だけを用意するのではありません。プログラムで値を設定するための JavaScript のコードを紹介します。 -
function setValue(element, date) {
+```js
+function setValue(element, date) {
     var isoString = date.toISOString()
     element.value = isoString.substring(0, (isoString.indexOf("T")|0) + 6|0);
-}
- -

もしこれがあなたの死後何世紀も経ってから起こるのであれば、なぜ10000年問題を心配するのかでしょうか。その通り、あなたはすでに死んでいるので、あなたのソフトウェアを使っている企業は、システムを十分に知っている他のコーダーが入ってきてそれを修正することなく、あなたのソフトウェアを使うと行き詰まってしまうからです。

- -

例

- -

この例では、日付を選択するユーザーインターフェイスの要素を2組生成します。ネイティブの <input type="datetime-local"> 入力欄と、ネイティブの入力に対応しない古いブラウザー向けの、5つの {{htmlelement("select")}} 要素による日時選択です。

- -

{{EmbedLiveSample('Examples', 600, 140)}}

- -

HTML は次のようになります。

- -
<form>
-  <div class="nativeDateTimePicker">
-    <label for="party">希望するパーティーの日時を選択して下さい。</label>
-    <input type="datetime-local" id="party" name="bday">
-    <span class="validity"></span>
-  </div>
-  <p class="fallbackLabel">希望するパーティーの日時を選択して下さい。</p>
-  <div class="fallbackDateTimePicker">
-    <div>
-      <span>
-        <select id="year" name="year">
-        </select>
-        <label for="year">年</label>
-      </span>
-      <span>
-        <select id="month" name="month">
-          <option selected>1</option>
-          <option>2</option>
-          <option>3</option>
-          <option>4</option>
-          <option>5</option>
-          <option>6</option>
-          <option>7</option>
-          <option>8</option>
-          <option>9</option>
-          <option>10</option>
-          <option>11</option>
-          <option>12</option>
-        </select>
-        <label for="month">月</label>
-      </span>
-      <span>
-        <select id="day" name="day">
-        </select>
-        <label for="day">日</label>
-      </span>
-    </div>
-    <div>
-      <span>
-        <select id="hour" name="hour">
-        <label for="hour">時</label>
-        </select>
-      </span>
-      <span>
-        <select id="minute" name="minute">
-        <label for="minute">分</label>
-        </select>
-      </span>
-    </div>
-  </div>
-</form>
- -

月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。時と分についても、とても多いので動的に生成するようにしました。

- - +} +``` -

もう一つの面白い部分は、機能の検出コードです。ブラウザーが <input type="datetime-local"> に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その type を datetime-local に設定してみて、すぐに type に何が設定されたかをチェックします。 datetime-local 型に対応していないブラウザーでは、 datetime-local 型が text 型へフォールバックされます。 <input type="datetime-local"> に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。

+もう一つの面白い部分は、機能の検出コードです。ブラウザーが `` に対応しているかどうかを検出するために、新たな {{htmlelement("input")}} 要素を生成し、その `type` を `datetime-local` に設定してみて、すぐに type に何が設定されたかをチェックします。 `datetime-local` 型に対応していないブラウザーでは、 `datetime-local` 型が `text` 型へフォールバックされます。 `` に対応していない場合は、ネイティブの日時入力欄を非表示にしてフォールバック用の ({{htmlelement("select")}}) による選択ユーザーインターフェイスを表示します。 -
// 変数を定義
+```js
+// 変数を定義
 var nativePicker = document.querySelector('.nativeDateTimePicker');
 var fallbackPicker = document.querySelector('.fallbackDateTimePicker');
 var fallbackLabel = document.querySelector('.fallbackLabel');
@@ -491,7 +476,7 @@ if(test.type === 'text') {
 }
 
 function populateDays(month) {
-  // 日の <select> から現在の一連の <option> 要素を削除し、
+  // 日の  に正しい数の新しい
- -
-

注: 53週ある年もあることを忘れないでください (年あたりの週数を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。

-
- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}{{Spec2('HTML5 W3C')}}
+} +``` + +> **Note:** 53 週ある年もあることを忘れないでください ([年あたりの週数](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。 + +## 仕様書 + +{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat("html.elements.input.input-datetime-local")}}

+{{Compat}} -

関連情報

+## 関連情報 - +- 全般的な {{HTMLElement("input")}} およびその操作に使用する {{domxref("HTMLInputElement")}} インターフェイス +- [``](/ja/docs/Web/HTML/Element/input/date) および [``](/ja/docs/Web/HTML/Element/input/time) +- [HTML で使われる日付や時刻の形式](/ja/docs/Web/HTML/Date_and_time_formats) +- [日付と時刻の選択のチュートリアル](/ja/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker) +- [CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) -- cgit v1.2.3-54-g00ecf