<html>
<head>
<title>HTML 5 - Chronological Display and Input</title>
<style>
.dtd-fragment { background-color: rgb(232, 232, 232)}
pre { color: darkred }
dt { font-weight: bold }
</style>
</head>
<body>
<h1>HTML 5 - Chronological Display and Input</h1>
<h2 id="edef-chronodisplay">Chronological Display Elements: <code>date</code>, <code>time</code>, <code>datetime</code>, <code>week</code>, <code>month</code>, and <code>dtlocal</code></h2>
<pre class="dtd-fragment">
<!ENTITY % chronodisplay "date | time | datetime | week | month | dtlocal" >
<!ELEMENT (<a href="#edef-chronodisplay">%chronodisplay;</a>) - - (<a href="http://www.w3.org/TR/html4/sgml/dtd.html#inline">%inline;</a>)*>
<!ATTLIST (<a href="#edef-chronodisplay">%chronodisplay;</a>)
<a href="http://www.w3.org/TR/html4/sgml/dtd.html#attrs">%attrs;</a> -- <a href="http://www.w3.org/TR/html4/sgml/dtd.html#coreattrs">%coreattrs</a>, <a href="http://www.w3.org/TR/html4/sgml/dtd.html#i18n">%i18n</a>, <a href="http://www.w3.org/TR/html4/sgml/dtd.html#events">%events</a> --
<a href="#adef-value-chronodisplay"><samp>value</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Specify the initial chronological value --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex"><samp>tabindex</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-number">NUMBER</a> #IMPLIED -- position in tabbing order --
>
</pre>
<p><em>
Start tag: <strong>required</strong>,
End tag: <strong>required</strong>
</em></p>
<p><em>Attribute definitions</em></p>
<dl>
<dt><a name="adef-value-chronodisplay"><samp>value</samp></a> = <a href=
"http://www.w3.org/TR/html4/types.html#type-cdata"><em>cdata</em></a> <a href=
"http://www.w3.org/TR/html4/types.html#case-attribute">[CA]</a></dt>
<dd>This attribute specifies the chronological value of
the element. It is optional except when the contents of the element are not a chronological value formatted in ISO 8601 <a href="http://whatwg.org/specs/web-forms/current-work/#refsISO8601">[ISO8601]</a>.</dd>
</dl>
<p><em>Attributes defined elsewhere</em></p>
<ul>
<li><a href="http://www.w3.org/TR/html4/struct/global.html#adef-id"><samp>
id</samp></a>, <a href="http://www.w3.org/TR/html4/struct/global.html#adef-class"><samp>class</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/global.html#id-and-class">document-wide identifiers</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/dirlang.html#adef-lang"><samp>lang</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/dirlang.html#language-info">language information</a>), <a href=
"http://www.w3.org/TR/html4/struct/dirlang.html#adef-dir"><samp>
dir</samp></a> (<a href="http://www.w3.org/TR/html4/struct/dirlang.html#bidirection">text
direction</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/global.html#adef-title"><samp>title</samp></a> (<a href="http://www.w3.org/TR/html4/struct/global.html#title">element title</a>)</li>
<li><a href="http://www.w3.org/TR/html4/present/styles.html#adef-style"><samp>style</samp></a> (<a href="http://www.w3.org/TR/html4/present/styles.html#style-element">inline style information</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onclick"><samp>onclick</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-ondblclick"><samp>ondblclick</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmousedown"><samp>onmousedown</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseup"><samp>onmouseup</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseover"><samp>onmouseover</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmousemove"><samp>onmousemove</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseout"><samp>onmouseout</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeypress"><samp>onkeypress</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeydown"><samp>onkeydown</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeyup"><samp>onkeyup</samp></a> (<a href="http://www.w3.org/TR/html4/interact/scripts.html#events">intrinsic events</a>)</li>
</ul>
<p>
Chronological display elements are used to provide chronological values and to provide a means for that same information to be displayed in <a href="http://www.w3.org/TR/html4/">HTML 4.01</a> compliant browsers. The usual meanings of the chronological display elements are as follows:
</p>
<dl>
<dt>date:</dt>
<dd>Used to display a date.</dd>
<dt>time:</dt>
<dd>Used to display a time.</dd>
<dt>datetime:</dt>
<dd>Used to display a date and time.</dd>
<dt>week:</dt>
<dd>Used to display a specific week of the year.</dd>
<dt>month:</dt>
<dd>Used to display a specific month and year.</dd>
<dt>dtlocal:</dt>
<dd>Used to display a date and time without a timezone.</dd>
</dl>
<h3>Examples of content using chronological display elements:</h3>
<p>The chronological data provided by these elements can be used for scheduling purposes, or for any other purposes envolving units of time. The actual data is contained in the elements' <a href="#adef-value-chronodisplay"><code>value</code></a> attributes.</p>
<pre><code><date value="2010-01-25">25-Jan-2005</date></code></pre>
<p>In the above example, the suggested rendering on a <a href="http://whatwg.org/specs/web-forms/current-work/">Web Forms 2.0</a> compliant user agent would be the date contained in <a href="#adef-value-chronodisplay"><code>value</code></a> in a localized format. For example, the browser may render "January 25th, 2005". Alternatively, it would also be valid to render the child contents of the element, with the localized date displayed as a tooltip. The second rendering, however, is not recommended.</p>
<p>The child contents of chronological display elements are intended for legacy user agent support. Although they can be used by a <a href="http://whatwg.org/specs/web-forms/current-work/">Web Forms 2.0</a> compliant browser, the primary intent is that a localized chronological value be rendered in the place of the contents.</p>
<p>If the <a href="#adef-value-chronodisplay"><code>value</code></a> attribute of a chronological display element is not specified, the user agent must check to see if the child contents are a text string containing an ISO 8601 <a href="http://whatwg.org/specs/web-forms/current-work/#refsISO8601">[ISO8601]</a> formatted value, and if so, the value of the <a href="#adef-value-chronodisplay"><code>value</code></a> attribute should default to that of the child contents.</p>
<pre><code><time>21:15:00.0Z</time></code></pre>
<p>The above example may be rendered as "9:15 pm", or some other localized time string.</p>
<h2 id="edef-chronoinput">Chronological Input Elements: <code>idate</code>, <code>itime</code>, <code>idatetime</code>, <code>iweek</code>, <code>imonth</code>, and <code>idtlocal</code></h2>
<pre class="dtd-fragment">
<!ENTITY % chronoinput "idate | itime | idatetime | iweek | imonth | idtlocal" >
<!ELEMENT (<a href="#chronoinput">%chronoinput;</a>) - - (<a href="http://www.w3.org/TR/html4/sgml/dtd.html#inline">%inline;</a>)*>
<!ATTLIST (<a href="#chronoinput">%chronoinput;</a>)
<a href="http://www.w3.org/TR/html4/sgml/dtd.html#attrs">%attrs;</a> -- <a href="http://www.w3.org/TR/html4/sgml/dtd.html#coreattrs">%coreattrs</a>, <a href="http://www.w3.org/TR/html4/sgml/dtd.html#i18n">%i18n</a>, <a href="http://www.w3.org/TR/html4/sgml/dtd.html#events">%events</a> --
<a href="http://whatwg.org/specs/web-forms/current-work/min"><samp>min</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Minimum bounds of an input range --
<a href="http://whatwg.org/specs/web-forms/current-work/#max"><samp>max</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Maximum bounds of an input range --
<a href="http://whatwg.org/specs/web-forms/current-work/#step"><samp>step</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Precision of the input --
<a href="http://whatwg.org/specs/web-forms/current-work/#required0"><samp>required</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Determines whether the form is required for submission --
<a href="http://whatwg.org/specs/web-forms/current-work/#form0"><samp>form</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-idref">IDREF</a> #IMPLIED -- A list of of form elements that the form control is to be associated with --
<a href="http://whatwg.org/specs/web-forms/current-work/#autofocus0"><samp>autofocus</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Specifies if the control receives focus when the page loads --
<a href="http://whatwg.org/specs/web-forms/current-work/#list"><samp>list</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-idref">IDREF</a> #IMPLIED -- Associate the control with a <a href="http://whatwg.org/specs/web-forms/current-work/#datalist">datalist</a> --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT"><samp>name</samp></a> <a href=
"http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- submit as part of form --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT"><samp>value</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-cdata">CDATA</a> #IMPLIED -- Specify the initial value of the control --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-disabled"><samp>disabled</samp></a> (disabled) #IMPLIED -- unavailable in this context --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-readonly"><samp>readonly</samp></a> (readonly) #IMPLIED -- for text and passwd --
<a href="http://www.w3.org/TR/html4/struct/objects.html#adef-usemap"><samp>usemap</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#URI">%URI;</a> #IMPLIED -- use client-side image map --
<a href="http://www.w3.org/TR/html4/struct/objects.html#adef-ismap"><samp>ismap</samp></a> (ismap) #IMPLIED -- use server-side image map --
<a href="http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex"><samp>tabindex</samp></a> <a href="http://www.w3.org/TR/html4/types.html#type-number">NUMBER</a> #IMPLIED -- position in tabbing order --
<a href="forms.html#adef-accesskey" onClick="return (false);"><samp>accesskey</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#Character">%Character;</a> #IMPLIED -- accessibility key character --
<a href="scripts.html#adef-onfocus" onClick="return (false);"><samp>onfocus</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#Script">%Script;</a> #IMPLIED -- the element got the focus --
<a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onblur"><samp>onblur</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#Script">%Script;</a> #IMPLIED -- the element lost the focus --
<a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onselect"><samp>onselect</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#Script">%Script;</a> #IMPLIED -- some text was selected --
<a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onchange"><samp>onchange</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#Script">%Script;</a> #IMPLIED -- the element value was changed --
<a href="forms.html#adef-accept" onClick="return (false);"><samp>accept</samp></a> <a href=
"http://www.w3.org/TR/html4/sgml/dtd.html#ContentTypes">%ContentTypes;</a> #IMPLIED -- list of MIME types for file upload --
>
</pre>
<p><em>
Start tag: <strong>required</strong>,
End tag: <strong>required</strong>
</em></p>
<p><em>Attributes defined elsewhere</em></p>
<ul>
<li><a href="http://www.w3.org/TR/html4/struct/global.html#adef-id"><samp>
id</samp></a>, <a href="http://www.w3.org/TR/html4/struct/global.html#adef-class"><samp>class</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/global.html#id-and-class">document-wide identifiers</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/dirlang.html#adef-lang"><samp>lang</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/dirlang.html#language-info">language information</a>), <a href=
"http://www.w3.org/TR/html4/struct/dirlang.html#adef-dir"><samp>
dir</samp></a> (<a href="http://www.w3.org/TR/html4/struct/dirlang.html#bidirection">text
direction</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/global.html#adef-title"><samp>title</samp></a> (<a href="http://www.w3.org/TR/html4/struct/global.html#title">element title</a>)</li>
<li><a href="http://www.w3.org/TR/html4/present/styles.html#adef-style"><samp>style</samp></a> (<a href="http://www.w3.org/TR/html4/present/styles.html#style-element">inline style information</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accept"><samp>accept</samp></a> (<a href="http://www.w3.org/TR/html4/interact/forms.html#edef-FORM">legal content types for a
server</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-readonly"><samp>readonly</samp></a> (<a href="http://www.w3.org/TR/html4/interact/forms.html#read-only">read-only input controls</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-disabled"><samp>disabled</samp></a> (<a href="http://www.w3.org/TR/html4/interact/forms.html#disabled">disabled input controls</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex"><samp>tabindex</samp></a> (<a href=
"http://www.w3.org/TR/html4/interact/forms.html#tabbing-navigation">tabbing navigation</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-accesskey"><samp>accesskey</samp></a> (<a href="http://www.w3.org/TR/html4/interact/forms.html#access-keys">access
keys</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/objects.html#adef-usemap"><samp>usemap</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/objects.html#edef-MAP">client-side image maps</a>)</li>
<li><a href="http://www.w3.org/TR/html4/struct/objects.html#adef-ismap"><samp>ismap</samp></a> (<a href=
"http://www.w3.org/TR/html4/struct/objects.html#server-side">server-side image maps</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onfocus"><samp>onfocus</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onblur"><samp>onblur</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onselect"><samp>onselect</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onchange"><samp>onchange</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onclick"><samp>onclick</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-ondblclick"><samp>ondblclick</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmousedown"><samp>onmousedown</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseup"><samp>onmouseup</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseover"><samp>onmouseover</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmousemove"><samp>onmousemove</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onmouseout"><samp>onmouseout</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeypress"><samp>onkeypress</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeydown"><samp>onkeydown</samp></a>, <a href="http://www.w3.org/TR/html4/interact/scripts.html#adef-onkeyup"><samp>onkeyup</samp></a> (<a href="http://www.w3.org/TR/html4/interact/scripts.html#events">intrinsic events</a>)</li>
<li><a href="http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT"><samp>name</samp></a>, <a href="http://www.w3.org/TR/html4/interact/forms.html#adef-value-INPUT"><samp>value</samp></a> (<a href="http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT">input controls</a>)</li>
<li><a href="http://whatwg.org/specs/web-forms/current-work/#min"><samp>min</samp></a>, <a href="http://whatwg.org/specs/web-forms/current-work/#max"><samp>max</samp></a>, <a href="http://whatwg.org/specs/web-forms/current-work/#step"><samp>step</samp></a>, <a href="http://whatwg.org/specs/web-forms/current-work/#required0"><samp>required</samp></a>, <a href="http://whatwg.org/specs/web-forms/current-work/#form0"><samp>form</samp></a>, <a href="http://whatwg.org/specs/web-forms/current-work/#autofocus0"><samp>autofocus</samp></a> , <a href="http://whatwg.org/specs/web-forms/current-work/#list"><samp>list</samp></a> (<a href="">Web Forms 2.0 form control extensions</a>)</li>
</ul>
<p>Chronological input elements are used to provide a means of inputting chronological values and to provide a means for such values to be inputted into <a href="http://www.w3.org/TR/html4/">HTML 4.01</a> compliant browsers. The usual meanings of the chronological input elements are as follows:</p>
<dl>
<dt>idate:</dt>
<dd>Used to input a date.</dd>
<dt>itime:</dt>
<dd>Used to input a time.</dd>
<dt>idatetime:</dt>
<dd>Used to input a date and time.</dd>
<dt>iweek:</dt>
<dd>Used to input a specific week of the year.</dd>
<dt>imonth:</dt>
<dd>Used to input a specific month and year.</dd>
<dt>idtlocal:</dt>
<dd>Used to input a date and time without a timezone.</dd>
</dl>
<h3>Examples of content using chronological input elements:</h3>
<p>Chronological input elements behave in a way similar to the <a href="http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT"><code>input</code></a> element in nearly all respects, with the most notable exception being that they can contain alternative markup for use by legacy <a href="http://www.w3.org/TR/html4/">HTML 4.01</a> user agents.</p>
<pre><code><label for="d1">First Date:</label>
<idate id="d1" name="d1" value="2005-01-30"></idate></code></pre>
<p>The above is a simple example where there is no alternative content for earlier user agents. The <a href="#edef-chronoinput"><code>idate</code></a> element should be rendered by the user agent as a native date input control.</p>
<pre><code><label for="d1">First Date:</label>
<idate id="d1" name="d1" value="2005-01-30">
<select name="d1_month"><!-- Options --></select>
<select name="d1_day"><!-- Options --></select>
<select name="d1_year"><!-- Options --></select>
</idate></code></pre>
<p>The above is the same example with contents for legacy user agents. When submitting a form, a <a href="http://whatwg.org/specs/web-forms/current-work/">Web Forms 2.0</a> compliant user agent would submit information only under the name "d1", whereas legacy clients would submit information under "d1_month", "d1_day" and "d1_year". Should there be a mismatch between the number of controls or the names between compliant user agents and legacy user agents, webmasters must take this into account when writing both markup and server-side scripts and applications.</p>
<p>If a chronological input element has no <a href="http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT"><code>name</code></a> element, the user agent should try to obtain all undefined attributes, including <a href="http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT"><code>name</code></a>, from the first control element within its child contents.</p>
<pre><code><label>First Date:<br>
<idate>
<input type="text" name="d1" value="2005-01-30"><br>
Format: yyyy-mm-dd
</idate>
</label></code></pre>
<p>In the above example, the <a href="#edef-chronoinput"><code>idate</code></a> element inherits the <a href="http://www.w3.org/TR/html4/interact/forms.html#adef-name-INPUT"><code>name</code></a> and <code>value</code> attributes from the child <a href="http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT"><code>input</code></a> element. I compliant user agent would then ignore the rest of the child content of <a href="#edef-chronoinput"><code>idate</code></a>.</p>
<pre><code><label>First Date:
<idate>
<select name="d1">
<option>2005-01-30</option>
<option>2005-02-01</option>
<option>2005-02-05</option>
</select>
</idate>
</label></code></pre>
<p>The above example would produce a list of dates, like the it would in legacy user agents, but the dates would be displayed in a localized format, but would not allow for custom date entry. This is because when <a href="#edef-chronoinput"><code>idate</code></a> and its siblings inherit from a child control element, they also inherit the basic semantic limitations of the element. In order to allow for custom date entry in addition to a list of dates, one must link <a href="#edef-chronoinput"><code>idate</code></a> to a <a href="http://whatwg.org/specs/web-forms/current-work/#the-datalist"><code>datalist</code></a> element:</p>
<pre><code><label>First Date:<br>
<idate list="d1_dates">
<input type="text" name="d1" value="2005-01-30">
Format: yyyy-mm-dd
</idate>
</label>
<datalist id="d1_dates">
<p>Or pick from the list...</p>
<select name="d1_dates">
<option>2005-01-30</option>
<option>2005-02-01</option>
<option>2005-02-05</option>
</select>
</datalist></code></pre>
</body>
</html>