hixie: Examples for type=datetime and type=datetime-local. (whatwg r4214)

hixie: Examples for type=datetime and type=datetime-local. (whatwg
r4214)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.3359&r2=1.3360&f=h
http://html5.org/tools/web-apps-tracker?from=4213&to=4214

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.3359
retrieving revision 1.3360
diff -u -d -r1.3359 -r1.3360
--- Overview.html 20 Oct 2009 21:55:37 -0000 1.3359
+++ Overview.html 20 Oct 2009 22:34:06 -0000 1.3360
@@ -29780,6 +29780,25 @@
    <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
    <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
 
+  </div><div class="example">
+
+   <p>The following fragment shows part of a calendar application. A
+   user can specify a date and time for a meeting (in his local time
+   zone, probably, though the user agent can allow the user to change
+   that), and since the submitted data includes the time-zone offset,
+   the application can ensure that the meeting is shown at the correct
+   time regardless of the time zones used by all the participants.</p>
+
+   <pre>&lt;fieldset&gt;
+ &lt;legend&gt;Add Meeting&lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Meeting name: &lt;input type=text name="meeting.label"&gt;&lt;/label&gt;
+ &lt;p&gt;&lt;label&gt;Meeting time: &lt;input type=datetime name="meeting.start"&gt;&lt;/label&gt;
+&lt;/fieldset&gt;</pre>
+
+   <p>Had the application used the <code title="attr-input-type-datetime-local"><a href="#local-date-and-time-state">datetime-local</a></code> type
+   instead, the calendar application would have also had to explicitly
+   determine which time zone the user intended.</p>
+
   </div><h6 id="date-state"><span class="secno">4.10.5.1.8 </span><dfn title="attr-input-type-date">Date</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><div class="impl">
 
   <p>When an <code><a href="#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute is in the <a href="#date-state" title="attr-input-type-date">Date</a> state, the rules in this
@@ -30397,6 +30416,32 @@
    <code class="no-backref" title="dom-textarea/input-select"><a href="#dom-textarea-input-select">select()</a></code> and
    <code class="no-backref" title="dom-textarea/input-setSelectionRange"><a href="#dom-textarea-input-setselectionrange">setSelectionRange()</a></code> methods.</p>
 
+  </div><div class="example">
+
+   <p>The following example shows part of a flight booking
+   application. The application uses an <code><a href="#the-input-element">input</a></code> element
+   with its <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute set to
+   <code title="attr-input-type-datetime-local"><a href="#local-date-and-time-state">datetime-local</a></code>,
+   and it then interprets the given date and time in the time zone of
+   the selected airport.</p>
+
+   <pre>&lt;fieldset&gt;
+ &lt;legend&gt;Destination&lt;/legend&gt;
+ &lt;p&gt;&lt;label&gt;Airport: &lt;input type=text name=to list=airports&gt;&lt;/label&gt;&lt;/p&gt;
+ &lt;p&gt;&lt;label&gt;Departure time: &lt;input type=datetime-local name=totime step=3600&gt;&lt;/label&gt;&lt;/p&gt;
+&lt;/fieldset&gt;
+&lt;datalist id=airports&gt;
+ &lt;option value=ATL label="Atlanta"&gt;
+ &lt;option value=MEM label="Memphis"&gt;
+ &lt;option value=LHR label="London Heathrow"&gt;
+ &lt;option value=LAX label="Los Angeles"&gt;
+ &lt;option value=FRA label="Frankfurt"&gt;
+&lt;/datalist&gt;</pre>
+
+   <p>If the application instead used the <code title="attr-input-type-datetime"><a href="#date-and-time-state">datetime</a></code> type, then the
+   user would have to work out the time-zone conversions himself,
+   which is clearly not a good user experience!</p>
+
   </div><h6 id="number-state"><span class="secno">4.10.5.1.13 </span><dfn title="attr-input-type-number">Number</dfn> state</h6><p class="XXX annotation"><b>Status: </b><i>Last call for comments</i><div class="impl">
 
   <p>When an <code><a href="#the-input-element">input</a></code> element's <code title="attr-input-type"><a href="#attr-input-type">type</a></code> attribute is in the <a href="#number-state" title="attr-input-type-number">Number</a> state, the rules in

Received on Tuesday, 20 October 2009 22:34:51 UTC