diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/element%2Finput%2Fmonth.html | |
new repository
Diffstat (limited to 'devdocs/html/element%2Finput%2Fmonth.html')
| -rw-r--r-- | devdocs/html/element%2Finput%2Fmonth.html | 347 |
1 files changed, 347 insertions, 0 deletions
diff --git a/devdocs/html/element%2Finput%2Fmonth.html b/devdocs/html/element%2Finput%2Fmonth.html new file mode 100644 index 00000000..041f2b4a --- /dev/null +++ b/devdocs/html/element%2Finput%2Fmonth.html @@ -0,0 +1,347 @@ +<header><h1><input type="month"></h1></header><div class="section-content"><p> <a href="../input"><code><input></code></a> elements of type <code>month</code> create input fields that let the user enter a month and year allowing a month and year to be easily entered. The value is a string whose value is in the format "<code>YYYY-MM</code>", where <code>YYYY</code> is the four-digit year and <code>MM</code> is the month number. </p></div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-month.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p> The control's UI varies in general from browser to browser; at the moment support is patchy, with only Chrome/Opera and Edge on desktop — and most modern mobile browser versions — having usable implementations. In browsers that don't support <code>month</code> inputs, the control degrades gracefully to a simple <a href="text"><code><input type="text"></code></a>, although there may be automatic validation of the entered text to ensure it's formatted as expected. </p> <p> For those of you using a browser that doesn't support <code>month</code>, the screenshot below shows what it looks like in Chrome and Opera. Clicking the down arrow on the right-hand side brings up a date picker that lets you select the month and year. </p> <p> <img src="data:image/png;base64,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" alt="Month control on Chrome browser" width="273" height="216" loading="lazy"> </p> <p>The Microsoft Edge <code>month</code> control looks like this:</p> <p> <img src="data:image/png;base64,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" alt="Month control on Edge browser" width="227" height="389" loading="lazy"> </p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"><p> A string representing the value of the month and year entered into the input, in the form YYYY-MM (four or more digit year, then a hyphen ("<code>-</code>"), followed by the two-digit month). The format of the month string used by this input type is described in <a href="../../date_and_time_formats#month_strings">Month strings</a>. </p></div> +<h3 id="setting_a_default_value">Setting a default value</h3> +<div class="section-content"> +<p>You can set a default value for the input control by including a month and year inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="iCvTj9jtfL9EwBCzYhIU86QvGkrVkbMWSo/hz0x/bZM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2001-06<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Setting a default value sample" id="frame_setting_a_default_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_a_default_value" loading="lazy"></iframe> +</div> <p>One thing to note is that the displayed date format differs from the actual <code>value</code>; most <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agents</a> display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date <code>value</code> is always formatted <code>yyyy-MM</code>.</p> <p>When the above value is submitted to the server, for example, it will look like <code>bday-month=1978-06</code>.</p> +</div> +<h3 id="setting_the_value_using_javascript">Setting the value using JavaScript</h3> +<div class="section-content"> +<p>You can also get and set the date value in JavaScript using the <a class="page-not-created"><code>HTMLInputElement.value</code></a> property, for example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="fXbh4ERoVcOHEWNfzyAAj9qeBQCHfvbuaXkNXr6+O40=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="1f19y/H5VfADGcVbB54eIud2vKnIN52bUrWNtni5n0U=" data-language="js"><span class="token keyword">const</span> monthControl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="month"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +monthControl<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"2001-06"</span><span class="token punctuation">;</span> +</pre> +</div> +<div class="code-example" id="sect2"> + +<iframe class="sample-code-frame" title="Setting the value using JavaScript sample" id="frame_setting_the_value_using_javascript" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_the_value_using_javascript" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes common to <a href="../input"><code><input></code></a> elements, month inputs offer the following attributes.</p></div> +<h3 id="list">list</h3> +<div class="section-content"><p> The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value. </p></div> +<h3 id="max">max</h3> +<div class="section-content"> +<p> The latest year and month, in the string format discussed in the <a href="#value">Value</a> section above, to accept. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a valid string in "<code>yyyy-MM</code>" format, then the element has no maximum value. </p> <p>This value must specify a year-month pairing later than or equal to the one specified by the <code>min</code> attribute.</p> +</div> +<h3 id="min">min</h3> +<div class="section-content"> +<p> The earliest year and month to accept, in the same "<code>yyyy-MM</code>" format described above. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid year and month string, the input has no minimum value. </p> <p>This value must be a year-month pairing which is earlier than or equal to the one specified by the <code>max</code> attribute.</p> +</div> +<h3 id="readonly">readonly</h3> +<div class="section-content"> +<p> A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed from JavaScript code that directly sets the value of the <a class="page-not-created"><code>HTMLInputElement.value</code></a> property. </p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step">step</h3> +<div class="section-content"> +<p> The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid. </p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p> For <code>month</code> inputs, the value of <code>step</code> is given in months, with a scaling factor of 1 (since the underlying numeric value is also in months). The default value of <code>step</code> is 1 month. </p> +</div> +<h2 id="using_month_inputs">Using month inputs</h2> +<div class="section-content"> +<p> Date-related inputs (including <code>month</code>) sound convenient at first glance; they promise an easy UI for choosing dates, and they normalize the data format sent to the server, regardless of the user's locale. However, there are issues with <code><input type="month"></code> because at this time, many major browsers don't yet support it. </p> <p>We'll look at basic and more complex uses of <code><input type="month"></code>, then offer advice on mitigating the browser support issue in the section <a href="#handling_browser_support">Handling browser support</a>).</p> +</div> +<h3 id="basic_uses_of_month">Basic uses of month</h3> +<div class="section-content"> +<p>The simplest use of <code><input type="month"></code> involves a basic <a href="../input"><code><input></code></a> and <a href="../label"><code><label></code></a> element combination, as seen below:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3BOnuNHf4TM0/Mwl4iMLDWOcFJAawGhjPXeMkoL0kYI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect5"> + +<iframe class="sample-code-frame" title="Basic uses of month sample" id="frame_basic_uses_of_month" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=basic_uses_of_month" loading="lazy"></iframe> +</div> +</div> +<h3 id="setting_maximum_and_minimum_dates">Setting maximum and minimum dates</h3> +<div class="section-content"> +<p> You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to restrict the range of dates that the user can choose. In the following example we specify a minimum month of <code>1900-01</code> and a maximum month of <code>2013-12</code>: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="wGkIhlT19ZtvQG9enP+i8K+OD7pqM9aQbzDsBmjstPY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month were you born in?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bday-month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1900-01<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2013-12<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect6"> + +<iframe class="sample-code-frame" title="Setting maximum and minimum dates sample" id="frame_setting_maximum_and_minimum_dates" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=setting_maximum_and_minimum_dates" loading="lazy"></iframe> +</div> <p>The result here is that:</p> <ul> <li>Only months between in January 1900 and December 2013 can be selected; months outside that range can't be scrolled to in the control.</li> <li>Depending on what browser you are using, you might find that months outside the specified range might not be selectable in the month picker (e.g. Edge), or invalid (see <a href="#validation">Validation</a>) but still available (e.g. Chrome).</li> </ul> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"><p> <code><input type="month"></code> doesn't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> for sizing needs. </p></div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p> By default, <code><input type="month"></code> does not apply any validation to entered values. The UI implementations generally don't let you enter anything that isn't a date — which is helpful — but you can still submit the form with the <code>month</code> input empty, or enter an invalid date (e.g. the 32nd of April). </p> <p> To help avoid this, you can use <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> to restrict the available dates (see <a href="#setting_maximum_and_minimum_dates">Setting maximum and minimum dates</a>), and in addition use the <a href="../input#required"><code>required</code></a> attribute to make filling in the date mandatory. As a result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field. </p> <p>Let's look at an example; here we've set minimum and maximum dates, and also made the field required:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t76ejrHw0V4jzr+JS9ugi9HXUCyeNhidCJ9cEMRqHAk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + What month would you like to visit (June to Sept.)? + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-06<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-09<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p> If you try to submit the form without both the month and year specified (or with a date outside the set bounds), the browser displays an error. Try playing with the example now: </p> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="120" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Here's a screenshot for those of you who aren't using a supporting browser:</p> <p> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAd0AAABdCAMAAADXJEwwAAACGVBMVEX////8/Pzw8PDc3Nz+/v7/qA/4+Pgzmf/v7+8QEBB2dnYAAADm5ubPz8+Li4vV1dWMjIyJiYnHx8fn///n5+fnplIAgsbGggD/46UAVaWpqaml4////+fG//+Ex////8b/x4RSpuelVQAPDw/W1tbt7e3a2tqEAAD29vafn5+hoaGOjo7Ozs5xcXG6egBgYGAAAIRNnNn+/f3/tjYAAFJRAABSAFJSAIT/tC3vu3xtbW19fX2b1e/v77rf398AUJu67+/z8/MAerq9vb08PDzv79mbUAB8AE3Z7+//ukPT09NSUlJ8u+/x1puVlZUbX6OAgIDCwsL/qhn/6Lze///ZnE37+/sAAHyEg8HmuIMcHBzS/v//+f//1Y/q6upqhLv/0Zyc0f+Et+fnpqW3t7fKytC76P+lVVKEAFJNAHy5hG2ano+EVaX///P//97Qnm3Z2dmIofFvb6ZSVaWTbW0AAE2sx/+lpufAgjmObY6wbzmlpsZooM7/tFZ8AADW8/+vYh7GglL//9Cqg6MAgp3n/+fe2P/y//8zxv/i4uL/7tX/pg8gICBOlJRtbYSiwqyEAITCzJebegCEx+eiy8oAVVKwmf/y5f+w7///v1aP5f//rzz/qyf04KLGgoSExfMYTZTnpoR8AHz/x6XGpqWl48bGplLnx4T/9eKPj4//27H/nBqlVYSEpqUAUE2EVVLG/8ZNAE2EgoQy04xPAAAKcklEQVR42u2ciV8T6RnHB0UIDnY3dwg5CYFkK4dZYwU1EkB35XKFgiIFj0Vt3QN1XbeuYruutl1X67rVtts9em/v8y/s8zzvO7mYSQYMZQjP70MmmZln3pn3/b7PMUmIorBYLBaLxWKxWCxWldV1uskqOt3FOKoMt8lKYrzV1emm3Za5lt1NpxlIVdXUpDQ+j6p9MawaopvM4DKTNE23U1WjblXd26q4YeFuca72jGYOcXvoyfetYGW7SIsz3Bkyderwd1uLTyA3v+n0pVXVY7YHYNzy5VX9fZEoLr2q2hvceLqZh68lQT3DSbN0w51w/ZG9OEy/bY2oRajCpyocHPjQWXKI/hCJkfale4Nm7AJtaindildCl6/k51CgrcwEKW4NTX3p6Mqu0bPXQ4gDbZ4Np5tUcxoqoDt+7dv49NYHvzbwPXIW7E+xI3o9Jvy22r5LM64UjbeyI/r2CbqBS61KBbrFrdFV+a4ahSRvCMMJPapH9+71/p9eVJSz/f234Vov9/efo5UzTpN0k3m6gR+qxwHvW99XfzNnMCrYX+ygu+VPGIPAe8CNtHjk2/fHTjUUwegNA09PXo8bfJYiujyE4lfL/TbaHIUwDw2EO/eKcIDU4Mh/EF0IhFGwDcm23Kon56xo58bjQrAPHYZOpkVGWAoP88KaL93iRC4RNfoHp+KNYiymvRHp/yHt7OHOn7XhLqPWwp0SJEZonK1fw26RrGjrO7TXG62m786eU2bPOKduzilL55Wz8HdtLvDhXODy+bJ0h5NSwwV0lbcRL8A9/gO96AqzPNAG3f099IaGOooTNYID4BG9x94+O4MdxEznpr5H0cHId8UhBCdKoxB+TyCK0syJCLp4Gq+YBZAXFd8NrS08i+ZpYBehWREiV/mgVXMhvBJo2ZcOaf4Elxvu7A1CW24xnzTfFRgo3NLZ7yNU7I1ha0DVIy4LOhKBrmEYzvmuiAWScRUj89Qp5+x58Fvy17s3ye9my9Pt0V71FNJV3n5fPW4Al/rqewqowAWoT2J4cGhkBNMYwSo+IUtJRIvM4hDciwPju0G0YEQL6OKTFpkBzuvB0raKfPe/HjGtNA8CGyqh5Jijfzoopsog7s3RlU3l6VKNRpZGrSlUUMK8ArXgZMFLz9OlBr8KVrtmnr2tLJ27e/3xKTzPWWIcuHxuLXQRL0Vn3VqmN/h60OsBjyugS/1dSZf67DWiG/4k6Hv6CbRGYw4jWkAXwWl0fe/cv6WUtlVEl2J9QZrGGYj0RPbDE4VvCANgEiqkK3GvpGvcGpkDVk8u4YJtvpzAztHgaHRhHH/R2PiTHyvKjxobf6ko37mqrfwKTH6uGciVIoP8qEMsVpae3rw4hXSnbl7EbUu3larThbx0CxA/ac3ThWRm4Ls46uB6+nRhD8wTaI1CNQSzQroFvhu49PiGUtpWcd6lQmBfawEPwhbx5E+k4ceC34TvGrZGFXSeZyldanDqYpXvd89iUTULC/Taqevks0vli6qykfl9o8gsKxzqjUQlB2sl3XCnh8bUgG7k3gXFfQ/muVuMOMQ/qGXIcfGew63dPRFYrS1KtiJkFlZVIXIoDOFapuwN5irhyL1bAgkmy0uFdLW8+/egdnZJ17A1Ai2vMHBLlALR0rxb5XczhLOC32IhdVfAna0A14hu2apKjLUojCDMebCWhOdncHOaK5N7n0BG+hqLTKhAqM5Vb0NZHYK1N+QhuXkgRtkr3k3wqnvfoNoaCaqPtOAobjhFW/h0T4wz2sFjEOogqNIxiWsN45Xk1yQROLD33/9Ki+o+StNI5mQRrsXZsap6DJZBo9bC73lVmnayb8+oyIKVkJvyA9ZTXsm6SnTxHgjvgmbpjmgJV85PXYfltblV0y1/R2RKKcM99WtpBSrmdVORr61Bpffv3pBV3okcetgj9TBp9t2MjdBXwXVsvCDBVoFu0XucG0s3k3xNk3U/RYBIH1rfE7zpXPvBkeI3qCNR/oyIPyNiujUg/vS+lsXfvKltvPytORZr8+rECR6DmpXjBOOtYbjgvQ4eh5qFy3hrVBeGZO5lvLULV1GGLvBo1JLq6+vzcBFvvWXEcJ5DH/ntL5KGCrcOvWgNTYykUgaEXRM7q6cJV03CXbCPWHruJXfPzNSl9PBODNmqp6GJmqS7aPEKqnkim2iY0cO701ZN7axJui81W/wC/9Jsy+riZbom6Fo94Xwz44pnG+rK0O1WVXVMW+k7/Goxtu49+Ac6clQdZLpWo9ueaY4nZlKGdLuB53h6zIiuAAw69LsB9l3L0R25klnINqwMzZLukaPIrnvwyNEx26FXDvYd/lQ9OWDrfnRHHZxW3z0IaKdVFUwO3YE18F9w875/pg/Pot2TtLqH6W4o3V3tGVcZurZpEXA1usCre9DWfXJgPD1Ir7TIDDvRz/vePQh/tj517MjRkwN9Jwe2At35/TtKdexLi9Dd7tqmk3hzeRe8EgBrdAHX+PcGACvSnC6mizbg62iDD9gOpluB7mc7VmrSEnR3V6IrwnMuMr9KdPfo0T10ZwyzMNrgY+vQ3a9D9+XNQFcUS9OUd8f/c1D6pT5dzXe3Lt3JyclNRRdzKwRn8N1B2zTkVKiaRLbVoavl3S1L99h8ZP7lTUWX7neB33hafSRqZgEuT3eaKmNclzXz1qULrzcZ3by28XtVNUyX34l8Drr28p84JLpiDrsfrYSh367oNwBGOXUMj27v6ZArfrHDYWe6/0e6/lgs5q9IV0LJ0V1JVmd70SamuyF0/eCYDovR5c9310A3lUrp0cUHkIDoOwxx1C58ORZzaEtgEouNxgVaGZn9SseBJNmTVVfCvjgasxNRMLbLzfZ4VxwCNOym89hjw0lTdPm7Gaunu395efkLY7p2JJaIDykdPXHhYpBdEY90uVK6w34t/ZLvjsbjkGTtDnmE2AwruBXM/WSd6DJFl7V6uh9PTk5+rEM3TyVxAJ0Rlg7wNrEmaOrRPZCgR0Fkpt3xXCEl6OKhYOf3U3MOprtOdCfnH8xP6lVVBAYCaAxDrV8uwW9HYzEtNJuni6VyvIAungBCs99PTs1014vuZ4ry4HO9yEwkZETF8EkebBfOlq+qzNIF665Ese/SEdScn+muE93lKeWvXxjSlbeqmH1HO8SOPIrV0c1vlnlXHGHHcGAvcF+mW828+7flz3cY08VA3JWAAN3T1eHAl1hFx0bjlek6sGbO5d1RWUpLulhDx/zizis2ush014nu5vkEkMV0mS5K77sZx5hujdCdXwl3v4/p1ghd5c8rdj1QmG6t0LWqmC7TZTFdpst0mS7TZbpMd6PpNjPd2pX1f1lhhOmuWS5r/ypK88Qi0127UpmX7N+wriYWd40Y/P8uq7LqZxILmSsjuyyqkZGRFwz+955lgm5dwzZXpuNKe/sLVlR7e/uV7fq/m8EyQTfVkI27Pspst6oymeaFLKfdNYfmhqxtweVyNVtRcF0L8WxihgPzWp13piGRzW6zrIx+a45lDm/dTIOVZfA7kSxzeOtTqVSdZYU/8sqQng+whcV4WCwWi8VisVgsFovFYm1y/Q8ZJtKY13icwwAAAABJRU5ErkJggg==" alt="Month required prompt on Chrome browser" width="477" height="93" loading="lazy"> </p> <p> Here's the CSS used in the above example. Here we make use of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> CSS properties to style the input based on whether the current value is valid. We had to put the icons on a <a href="../span"><code><span></code></a> next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard warning" id="sect8"> <p> <strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML entirely and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, of the wrong type, and so forth). </p> </div> +</div> +<h2 id="handling_browser_support">Handling browser support</h2> +<div class="section-content"> +<p> As mentioned above, the major problem with using date inputs at the time of writing is that many major browsers don't yet implement them all; only Chrome/Opera and Edge support it on desktop, and most modern browsers on mobile. As an example, the <code>month</code> picker on Chrome for Android looks like this: </p> <p> <img src="data:image/png;base64,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" alt="Month picker on Chrome for Android" width="360" height="640" loading="lazy"> </p> <p>Non-supporting browsers gracefully degrade to a text input, but this creates problems both in terms of consistency of user interface (the presented control will be different), and data handling.</p> <p> The second problem is the more serious of the two. As mentioned earlier, with a <code>month</code> input the actual value is always normalized to the format <code>yyyy-mm</code>. On the other hand, in its default configuration, a <code>text</code> input has no idea what format the date should be in, and this is an issue because of the number of different ways in which people write dates. For example: </p> <ul> <li> +<code>mmyyyy</code> (072022)</li> <li> +<code>mm/yyyy</code> (07/2022)</li> <li> +<code>mm-yyyy</code> (07-2022)</li> <li> +<code>yyyy-mm</code> (2022-07)</li> <li> +<code>Month yyyy</code> (July 2022)</li> <li>and so forth…</li> </ul> <p> One way around this is to put a <a href="../input#pattern"><code>pattern</code></a> attribute on your <code>month</code> input. Even though the <code>month</code> input doesn't use it, if the browser falls back to treating it like a <code>text</code> input, the pattern will be used. For example, try viewing the following demo in a browser that doesn't support <code>month</code> inputs: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="t6qxVInkQAe/bvfPN82xIaffZUJuvKobwzEjNI/TZxY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + What month would you like to visit (June to Sept.)? + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-06<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2022-09<span class="token punctuation">"</span></span> + <span class="token attr-name">required</span> + <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[0-9]{4}-[0-9]{2}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit form<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Handling browser support sample" id="frame_handling_browser_support" width="600" height="100" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=handling_browser_support" loading="lazy"></iframe> +</div> <p> If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates (such as <code>0000-42</code>), or incorrectly formatted dates that follow the pattern. </p> <p> There's also the problem that the user won't necessarily know which of the many date formats is expected. We have work left to do. </p> <p>The best way to deal with dates in forms in a cross-browser way (until all major browsers have supported them for a while) is to get the user to enter the month and year in separate controls (<a href="../select"><code><select></code></a> elements being popular; see below for an implementation), or use JavaScript libraries such as the <a href="https://jqueryui.com/datepicker/" target="_blank">jQuery date picker</a> plugin.</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p> In this example, we create two sets of UI elements, each designed to let the user select a month and year. The first is a native <code>month</code> input, and the other is a pair of <a href="../select"><code><select></code></a> elements that allow choosing a month and year independently, for compatibility with browsers that don't yet support <code><input type="month"></code>. </p> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="140" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/month/runner.html?id=examples" loading="lazy"></iframe> +</div> +</div> +<h3 id="html">HTML</h3> +<div class="section-content"> +<p>The form that requests the month and year looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="WO5cOnh6ME3GHXgtvPFaZu61nuEGVnqCbJaj/A6Ox5I=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nativeDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month-visit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month would you like to visit us?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month-visit<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month-visit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>validity<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fallbackLabel<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>What month would you like to visit us?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fallbackDatePicker<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Month:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>month<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>January<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>February<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>March<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>April<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>May<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>June<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>July<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>August<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>September<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>October<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>November<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span><span class="token punctuation">></span></span>December<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Year:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>year<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> +</pre> +</div> <p> The <a href="../div"><code><div></code></a> with the ID <code>nativeDatePicker</code> uses the <code>month</code> input type to request the month and year, while the <code><div></code> with the ID <code>fallbackDatePicker</code> instead uses a pair of <code><select></code> elements. The first requests the month, and the second the year. </p> <p> The <code><select></code> for choosing the month is hardcoded with the names of the months, as they don't change (leaving localization out of things). The list of available year values is dynamically generated depending on the current year (see the code comments below for detailed explanations of how these functions work). </p> +</div> +<h3 id="javascript">JavaScript</h3> +<div class="section-content"> +<p>The JavaScript code that handles selecting which approach to use and to set up the list of years to include in the non-native year <code><select></code> follows.</p> <p> The part of the example that may be of most interest is the feature detection code. In order to detect whether the browser supports <code><input type="month"></code>, we create a new <a href="../input"><code><input></code></a> element, try setting its <code>type</code> to <code>month</code>, then immediately check what its type is set to. Browsers that don't support type <code>month</code> will return <code>text</code>, since that's What month falls back to when not supported. If <code><input type="month"></code> is not supported, we hide the native picker and show the fallback picker UI instead. </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="ea2tuD8Af5HhRjix9zmvOVm4ByV6h/+D2mddnKEiXNw=" data-language="js"><span class="token comment">// Get UI elements</span> +<span class="token keyword">const</span> nativePicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".nativeDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackPicker <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackDatePicker"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> fallbackLabel <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".fallbackLabel"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">const</span> yearSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#year"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> monthSelect <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#month"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token comment">// Hide fallback initially</span> +fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> +fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + +<span class="token comment">// Test whether a new date input falls back to a text input or not</span> +<span class="token keyword">const</span> test <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +<span class="token keyword">try</span> <span class="token punctuation">{</span> + test<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">"month"</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>e<span class="token punctuation">)</span> <span class="token punctuation">{</span> + console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>description<span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token comment">// If it does, run the code inside the if () {} block</span> +<span class="token keyword">if</span> <span class="token punctuation">(</span>test<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">"text"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Hide the native picker and show the fallback</span> + nativePicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + fallbackPicker<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + fallbackLabel<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + <span class="token comment">// Populate the years dynamically</span> + <span class="token comment">// (the months are always the same, therefore hardcoded)</span> + <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token keyword">function</span> <span class="token function">populateYears</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token comment">// Get the current year as a number</span> + <span class="token keyword">const</span> date <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> year <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token comment">// Make this year, and the 100 years before it available in the year <select></span> + <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator"><=</span> <span class="token number">100</span><span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + <span class="token keyword">const</span> option <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"option"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + option<span class="token punctuation">.</span>textContent <span class="token operator">=</span> year <span class="token operator">-</span> i<span class="token punctuation">;</span> + yearSelect<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span> +</pre> +</div> <div class="notecard note" id="sect11"> <p> <strong>Note:</strong> Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year" target="_blank">Weeks per year</a>)! You'll need to take this into consideration when developing production apps. </p> </div> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td> A string representing a month and year, or empty. </td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#readonly"><code>readonly</code></a>, and <a href="../input#step"><code>step</code></a>. </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td><code>value</code></td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>. </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role" target="_blank"><code>no corresponding role</code></a></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#month-state-(type=month)">HTML Standard <br><small># month-state-(type=month)</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>month</code></th> +<td class="bc-supports-yes">20</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-no"><details><summary>No</summary>The input type is recognized, but there is no month-specific control. See <a href="https://webkit.org/b/200416">bug 200416</a>.</details></td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">25</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">Yes</td> +<td class="bc-supports-yes">1.5</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li>The generic <a href="../input"><code><input></code></a> element and the interface used to manipulate it, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> +</li> <li><a href="../../date_and_time_formats">Date and time formats used in HTML</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Basic_native_form_controls#date_and_time_picker">Date and Time picker tutorial</a></li> <li> +<a href="datetime-local"><code><input type="datetime-local"></code></a>, <a href="date"><code><input type="date"></code></a>, <a href="time"><code><input type="time"></code></a>, and <a href="week"><code><input type="week"></code></a> +</li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month</a> + </p> +</div> |