diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/html/element/input/date | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/html/element/input/date')
| -rw-r--r-- | files/ja/web/html/element/input/date/index.html | 527 |
1 files changed, 527 insertions, 0 deletions
diff --git a/files/ja/web/html/element/input/date/index.html b/files/ja/web/html/element/input/date/index.html new file mode 100644 index 0000000000..912af9970d --- /dev/null +++ b/files/ja/web/html/element/input/date/index.html @@ -0,0 +1,527 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/input/date +tags: + - HTML + - HTML フォーム + - Input Element + - Reference + - フォーム + - フォーム入力 + - 入力型 + - 日付 + - 日付選択 + - 要素 +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <strong><code>type="date"</code></strong> 入力型は、検証付きのテキストボックスまたは特殊な日付選択インターフェイスのどちらかで、ユーザーに日付を入力させる入力欄を生成します。</span></p> + +<p>結果の値には年、月、日が含まれますが、時刻は含まれ<em>ません</em>。 {{HTMLElement("input/time", "time")}} および {{HTMLElement("input/datetime-local", "datetime-local")}} 入力型は時刻や日付と時刻の入力に対応しています。</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力していただける場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> + +<p>入力欄のユーザーインターフェイスは、一般にブラウザーによってまちまちです。詳細は{{anch("Browser compatibility", "ブラウザーの互換性")}}を参照してください。対応していないブラウザーでは、このコントロールは単純な {{HTMLElement("input/text", '<input type="text">')}} に格下げされます。</p> + +<p>日付を選択する専用のインターフェイスを持つブラウザーの中で、 Chrome や Opera のデータコントロールは次のように表示されます。</p> + +<p><img alt="“dd/mm/yyyy” と、増加/減少ボタンと、カレンダーコントロールを表示するための下向きの矢印があるテキストボックス。" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>Edge の日付コントロールは次のように表示されます。</p> + +<p><img alt="“mm/dd/yyyy” があるが、操作をすると、3列の日付選択が表示される。" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Firefox の日付コントロールは次のように表示されます。</p> + +<p><img alt="違う形の “dd/mm/yyyy” テキストボックスで、選択可能なカレンダーコントロールを開いている。" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>{{domxref("DOMString")}} で、 YYYY-MM-DD 形式の日付、または空欄を表す</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} および {{domxref("HTMLElement/input_event", "input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("step", "input")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value" name="Value">値</h2> + +<p>入力欄に入力された日付を表す {{domxref("DOMString")}} です。日付は ISO8601 に従って書式化されており、これは <a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a>の<a href="/ja/docs/Web/HTML/Date_and_time_formats#Date_strings">日付の文字列</a>で説明されています。</p> + +<p>次のように、日付の入力欄の既定値を {{htmlattrxref("value", "input")}} 属性に設定することができます。</p> + +<pre class="brush: html notranslate"><input type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Value', 600, 40)}}</p> + +<div class="blockIndicator note"> +<p><strong>表示される日付の書式は実際の <code>value</code> とは異なります。</strong> — 表示される日付は<em>ユーザーのブラウザーに設定されたロケールに基づいて</em>書式になりますが、解釈された <code>value</code> は常に <code>yyyy-mm-dd</code> の書式です。</p> +</div> + +<p>日付の値は JavaScript で入力要素の {{domxref("HTMLInputElement.value", "value")}} および {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} プロパティを用いて、次のように取得したり設定したりすることができます。</p> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +console.log(dateControl.value); // "2017-06-01" と表示 +console.log(dateControl.valueAsNumber); // 1496275200000 と UNIX タイムスタンプを表示</pre> + +<p>このコードは {{HTMLElement("input")}} 要素のうち <code>type</code> が <code>date</code> である最初のものを探し、値を <code>2017-06-01</code> (2017年6月1日) に設定します。それからその値を文字列と数字の書式で読み直しています。</p> + +<h2 id="Additional_attributes" name="Additional_attributes">追加の属性</h2> + +<p>すべての {{HTMLElement("input")}} 要素で共通する属性と共に、 <code>date</code> 型の入力欄は以下の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("max")}}</code></td> + <td>受け付けられる最も遅い日付</td> + </tr> + <tr> + <td><code>{{anch("min")}}</code></td> + <td>受け付けられる最も早い日付</td> + </tr> + <tr> + <td><code>{{anch("step")}}</code></td> + <td>上下スピナーボタンで値を調整する時や、日付の検証の時の<em>刻み間隔</em></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<p>受け付ける最も遅い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以降になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>max</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付ではない場合、要素は最大の日付値を持ちません。</p> + +<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>min</code> 属性にあるもの<strong>より遅いか、同じ</strong>日付文字列でなければなりません。</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<p>受け付ける最も早い日付です。要素に入力された {{htmlattrxref("value", "input")}} がこれ以前になった場合、要素は<a href="/ja/docs/Web/Guide/HTML/HTML5/Constraint_validation">制約検証</a>に失敗します。 <code>min</code> 属性の値が <code>yyyy-mm-dd</code> の書式のありうる日付でない場合、要素は最小の日付値を持ちません。</p> + +<p><code>max</code> と <code>min</code> の両方の属性が設定された場合、この値は <code>max</code> 属性で指定されたもの<strong>より早いか、同じ</strong>日付を指定する必要があります。</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/ja/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<p><code>date</code> 入力欄では、 <code>step</code> の値は日単位で指定します。また、 86,400,000 に <code>step</code> を乗じた値に等しいミリ秒数として扱われます (数値はミリ秒単位であるため)。 <code>step</code> の既定値は <code>1</code> であり、1日を表します。</p> + +<div class="blockIndicator note"> +<p><code>any</code> を <code>step</code> 属性の値として指定すると、 <code>1</code> を <code>date</code> 入力欄に設定したのと同じ効果になります。</p> +</div> + +<h2 id="Using_date_inputs" name="Using_date_inputs">date 入力欄の使用</h2> + +<p>日付入力は便利に見えます。 — 日付の選択に簡単なインターフェイスを提供し、サーバーに送信するデータの書式をユーザーのロケールに関係なく正規化してくれます。しかし、今のところブラウザーの対応が限定されているため、 <code><input type="date"></code> には問題があります。</p> + +<p>この節では、 <code><input type="date"></code> の基本的な使い方と少し複雑な使い方を見てみてから、その後でブラウザーの互換性の問題を緩和するアドバイスを提供しましょう ({{anch("Handling browser support", "ブラウザーの互換性の扱い")}} を参照してください)。</p> + +<div class="blockIndicator note"> +<p>今後ブラウザーの互換性がもっと普遍的になり、この問題が消滅することを願います。</p> +</div> + +<h3 id="Basic_uses_of_date" name="Basic_uses_of_date">日付入力の基本的な使用</h3> + +<p>もっとも単純な <code><input type="date"></code> の使用方法は、次のように基本的な <code><input></code> と {{htmlelement("label")}} 要素の組み合わせです。</p> + +<pre class="brush: html notranslate"><form action="https://example.com"> + <label> + 誕生日を入力してください。 + <input type="date" name="bday"> + </label> + + <p><button>Submit</button></p> +</form></pre> + +<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> + +<p>この HTML は入力された日付を <code>bday</code> キーに入れて <code>https://example.com</code> に送ります。 — 結果の URL は <code>https://example.com/?bday=1955-06-08</code> のようになります。</p> + +<h3 id="Setting_maximum_and_minimum_dates" name="Setting_maximum_and_minimum_dates">日付の最大値と最小値の設定</h3> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} 属性を使用して、ユーザーが選択できる日付を制限することができます。次の例では、日付の最小値を <code>2017-04-01</code> に、日付の最大値を <code>2017-04-30</code> に設定しています。</p> + +<pre class="brush: html notranslate"><form> + <label for="party">希望するパーティーの日を選んでください。 + <input type="date" name="party" min="2017-04-01" max="2017-04-30"> + </label> +</form></pre> + +<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> + +<p>この結果は、2017年の4月の日付のみが選択できるようになります。 — テキストボックスの年と月の部分が編集できなくなり、日付選択ウィジェットで4月以外にスクロールすることができなくなります。</p> + +<div class="note"> +<p><strong>注</strong>: {{htmlattrxref("step", "input")}} 属性を使用すると、日付が加算するたびに飛ばす日数を設定できるはずです（例えば、土曜日のみを選択できるようにしたい場合など）。しかし、執筆時点でどの実装も正しく動作していないようです。</p> +</div> + +<h3 id="Controlling_input_size" name="Controlling_input_size">入力欄の寸法の制御</h3> + +<p><code><input type="date"></code> は {{htmlattrxref("size", "input")}} のような寸法に関する属性には対応していません。寸法を変更するには <a href="/ja/docs/Web/CSS">CSS</a> を推奨します。</p> + +<h2 id="Validation" name="Validation">検証</h2> + +<p>既定で、 <code><input type="date"></code> は入力された値をその書式を超えて検証しません。インターフェイスは一般的に、日付でないものの入力をさせないからです。 — これは便利です。 — しかし、入力欄を空のままにしたり、 <code>text</code> 型にフォールバックするブラウザーにおいて、無効な日付を入力したりすることが可能です (例えば4月32日など)。</p> + +<p>{{htmlattrxref("min", "input")}} および {{htmlattrxref("max", "input")}} を使用して有効な日付を制限すると ({{anch("Setting maximum and minimum dates", "日付の最大値と最小値の設定")}}を参照)、対応しているブラウザーは、範囲を外れたの日付を送信しようとしたときにエラーを表示するでしょう。しかし、ユーザーの端末が日付選択に完全に対応していない場合、値がこれらの日付の中にあることを保証するためには、送信された結果を再度チェックしなければならないでしょう。</p> + +<p>{{htmlattrxref("required", "input")}} 属性を使用して、日付の入力を必須にすることもできます。 — 空の日付欄を送信しようとするとエラーが表示されるでしょう。これは、テキスト入力欄で代替されたとしても、ほとんどのブラウザーで動作するはずです。</p> + +<p>日付の最小値と最大値の例と、入力欄を必須にする例を見てみましょう。</p> + +<pre class="brush: html notranslate"><form> + <label> + 推奨したいパーティーの日を選択してください (必須、4月1日～20日): + <input type="date" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </label> + + <p> + <button>Submit</button> + </p> +</form></pre> + +<p>不完全な日付 (または設定した範囲を外れた日付) を送信しようとすると、ブラウザーはエラーを表示します。例を実行してみましょう。</p> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>対応しているブラウザーで入力しなかった場合のスクリーンショットです。</p> + +<p><img alt="入力欄に吹き出しが重なっており、その中に橙色のビックリマークのアイコンと “Please fill in this field.” というメッセージがある。" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>上記の例で使用されている CSS です。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} <a href="/ja/docs/Web/CSS/Pseudo-elements">擬似要素</a>を使用して、現在の値が妥当かどうかで入力欄の隣にアイコンを追加しています。アイコンは入力欄そのものではなく、入力欄の隣の {{htmlelement("span")}} に置くようにしないと、 Chrome ではコントロールの内側にコンテンツを生成するので、正しく整形したり表示したりすることができません。</p> + +<pre class="brush: css notranslate">label { + display: flex; + align-items: center; +} + +span::after { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid+span::after { + content: '✓'; +}</pre> + +<div class="warning"> +<p><strong>重要</strong>: クライアント側のフォーム検証は、サーバー上の検証の<em>代用にはなりません</em>。誰かが HTML を改変したり、 HTML を完全にバイパスしてサーバーに直接データを送信したいrすることは簡単です。サーバーが受信したデータの検証に失敗した場合、不適切な形式のデータ、大きすぎるデータ、誤った種類のデータなどに遭遇すると、障害が発生するおそれがあります。</p> +</div> + +<h2 id="Handling_browser_support" name="Handling_browser_support">ブラウザーの対応の扱い</h2> + +<p>前述のように、現時点で日付入力を書く上で一番の問題は{{anch("Browser compatibility", "ブラウザーの対応")}}です。 Android 版 Firefox の日付選択はこの例のように表示されます。</p> + +<p><img alt="ウェブページとブラウザーの UI の上にモーダルで浮動しているポップアップのカレンダー選択" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<p>対応していないブラウザーでは、文字列入力欄に安全に格下げされますが、これはユーザーインターフェイスの一貫性 (表示されるコントロールが異なること) とデータの扱い方の両方で問題を生みます。</p> + +<p>2番目の問題はより深刻です。日付入力に対応していると、値が <code>yyyy-mm-dd</code> の書式で正規化されます。しかし、文字列入力欄では、ブラウザーには日付がどの書式で入力されるかの認識がなく、また、以下のように人間が日付を書く書式は様々なものがあります。</p> + +<ul> + <li><code>ddmmyyyy</code></li> + <li><code>dd/mm/yyyy</code></li> + <li><code>mm/dd/yyyy</code></li> + <li><code>dd-mm-yyyy</code></li> + <li><code>mm-dd-yyyy</code></li> + <li><code>Month dd, yyyy</code></li> +</ul> + +<p>これを回避する方法の一つは、日付入力欄に {{htmlattrxref("pattern", "input")}} 属性を付けることです。日付選択ではこれを使用しませんが、文字列入力にフォールバックされたときには使用されます。例えば、次の例を未対応のブラウザーで見てみてください。</p> + +<pre class="brush: html notranslate"><form> + <label for="bday">誕生日を入力してください: + <input type="date" name="bday" required pattern="\d{4}-\d{2}-\d{2}"> + <span class="validity"></span> + </label> + <p> + <button>送信</button> + </p> +</form></pre> + +<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> + +<p>送信ボタンを押すと、入力が <code>####-##-##</code> のパターン (<code>#</code> は数字の0から9) に一致しない場合はエラーメッセージが表示され、入力欄が無効として強調表示されるのが分かるでしょう。もちろん、これでユーザーが無効な日付や不正な書式を入力するのを止めることはできません。ですから、まだ問題があります。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">span { + position: relative; +} + +span::after { + right: -18px; + position: absolute; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<p>現時点では、ブラウザーに依存しない方法でフォームで日付を扱う最善の方法は、年月日を別々なコントロールに入力するようにするか、 <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> のような JavaScript ライブラリを使用することです。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>この例では、日付を選択するユーザーインターフェイスの要素を2組作成します。ネイティブの <code><input type="date"></code> による選択と、ネイティブの日付入力に対応していない古いブラウザー向けの、3つの {{htmlelement("select")}} 要素です。</p> + +<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<p>HTML は次のようになります。</p> + +<pre class="brush: html notranslate"><form> + <div class="nativeDatePicker"> + <label for="bday">誕生日を入力してください:</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">誕生日を入力してください:</p> + <div class="fallbackDatePicker"> + <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> +</form></pre> + +<p>月は (常に同じなので) ハードコーディングされていますが、年と日の値は、現在の年、および現在選択されている年と月によってそれぞれ動的に生成されます (どのように動作するかについての詳細な説明は、以下のコードのコメントを参照してください)。</p> + +<div class="hidden"> +<pre class="brush: css notranslate">span { + padding-left: 5px; +} + +input:invalid + span::after { + content: '✖'; +} + +input:valid + span::after { + content: '✓'; +}</pre> +</div> + +<h3 id="JavaScript">JavaScript</h3> + +<p>もう一つの面白い部分は、機能の検出コードです。 — ブラウザーが <code><input type="date"></code> に対応しているかどうかを検出するためのものです。</p> + +<p>新たな {{htmlelement("input")}} 要素を生成し、その <code>type</code> を <code>date</code> に設定して、すぐにどの型になったのかをチェックします。対応していないブラウザーでは、 <code>text</code> が返されます。これは、 <code>date</code> 型が <code>text</code> 型へフォールバックされるためです。 <code><input type="date"></code> に対応していない場合は、ネイティブの日付選択を非表示にして、フォールバック ({{htmlelement("select")}}) 表示します。</p> + +<pre class="brush: js notranslate">// 変数を定義 +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// 最初はフォールバックを隠す +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 新しい日付入力が文字列入力にフォールバックされるかどうか +var test = document.createElement('input'); + +try { + test.type = 'date'; +} catch (e) { + console.log(e.description); +} + +// もし文字列入力になるならば、 if() {} ブロックの中のコードを実行する +if(test.type === 'text') { + // ネイティブの日付選択を隠してフォールバック版を表示 + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // 年と日を動的に生成する + // （月は常に同じなのでハードコーディング） + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // delete the current set of <option> elements out of the + // day <select>, ready for the next set to be injected + while(daySelect.firstChild){ + daySelect.removeChild(daySelect.firstChild); + } + + // 挿入する日数を保持する変数を作成 + var dayNum; + + // 31日か30日か？ + if(month === '1' | month === '3' | month === '5' | month === '7' | month === '8' | month === '10' | month === '12') { + dayNum = 31; + } else if(month === '4' | month === '6' | month === '9' | month === '11') { + dayNum = 30; + } else { + // 2月の場合は、閏年かどうかを計算する + var year = yearSelect.value; + var isLeap = new Date(year, 1, 29).getMonth() == 1; + isLeap ? dayNum = 29 : dayNum = 28; + } + + // <select> に正しい数の新しい <option> 要素を挿入 + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // 前回の日が既に設定されていたら、 daySelect の値を + // 日に設定し、年を変えたときに1に戻ることを + // 避ける + if(previousDay) { + daySelect.value = previousDay; + + // 前回設定されていた日が大きい数字、例えば31であり、 + // その後で日数が少ない月 (例えば2月) を選択した場合、 + // このコードで空欄の日選択を表示するのではなく、 + // 利用可能な最大の日を選択するように保証する + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // 今年を数値として取得 + var date = new Date(); + var year = date.getFullYear(); + + // 今年から100年前までの年が <select> で選択できるようにする + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// 年や月の <select> 値が変更されたら、 populateDays() を +// 再実行して日数を調整する +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// 日の選択を保存 +var previousDay; + +// 以前どの日が設定されていたかを保存する +// 使い方は populateDays() を参照 +daySelect.onchange = function() { + previousDay = daySelect.value; +}</pre> + +<div class="note"> +<p><strong>注</strong>: 53週ある年もあることを忘れないでください (<a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">年あたりの週数</a>を参照)。商品のアプリを開発するときはこれを念頭に置いておく必要があります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'sec-forms.html#date-state-typedate', '<input type="date">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>全般的な {{HTMLElement("input")}} およびその操作に使用する{{domxref("HTMLInputElement")}} インターフェイス</li> + <li><a href="/ja/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">日付と時刻の選択のチュートリアル</a></li> + <li><a href="/ja/docs/Web/HTML/Date_and_time_formats">HTML で使われる日付や時刻の形式</a></li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> |