Permalink
Browse files

Added new HTML5 date and time input support. Fixes #2144

Types added: input type time, date, month, week, date time,
datetime-local to auto for enhancements.
  • Loading branch information...
toddparker committed Oct 15, 2011
1 parent 739373e commit 4ce1bfb79529cf3273d822e82182d57766107c88
Showing with 34 additions and 2 deletions.
  1. +33 −1 docs/forms/textinputs/index.html
  2. +1 −1 js/jquery.mobile.forms.textinput.js
@@ -37,7 +37,7 @@ <h2>Text inputs & Textareas</h2>
<p>Text inputs and textareas are coded with standard HTML elements, then enhanced by jQuery Mobile to make them more attractive and useable on a mobile device.</p>
<h2>Text inputs</h2>
- <p>To collect standard alphanmeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
+ <p>To collect standard alphanumeric text, use an <code>input</code> with a <code>type="text"</code> attribute. Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>input</code> so they are semantically associated. It's possible to <a href="../docs-forms.html">accessibly hide the label</a> if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.</p>
<pre><code>
&lt;label for=&quot;basic&quot;&gt;Text Input:&lt;/label&gt;
@@ -95,6 +95,38 @@ <h3>More text input types</h3>
<input type="tel" name="tel" id="tel" value="" />
</div>
+ <div data-role="fieldcontain">
+ <label for="time">Time:</label>
+ <input type="time" name="time" id="time" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="date">Date:</label>
+ <input type="date" name="date" id="date" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="month">Month:</label>
+ <input type="month" name="month" id="month" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="week">Week:</label>
+ <input type="week" name="week" id="week" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="datetime">Datetime:</label>
+ <input type="datetime" name="datetime" id="datetime" value="" />
+ </div>
+
+ <div data-role="fieldcontain">
+ <label for="datetime-l">Datetime local:</label>
+ <input type="datetime-local" name="datetime-l" id="datetime-l" value="" />
+ </div>
+
+
+
<h2>Textareas</h2>
<p>For multi-line text inputs, use a <code>textarea</code> element. The framework will auto-grow the height of the textarea to avoid the need for an internal scrollbar. </p>
<p>Set the <code>for</code> attribute of the <code>label</code> to match the ID of the <code>textarea</code> so they are semantically associated, and wrap them in a <code>div</code> with the <code> data-role="fieldcontain"</code> attribute to group them.</p>
@@ -10,7 +10,7 @@
$.widget( "mobile.textinput", $.mobile.widget, {
options: {
theme: null,
- initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input:not([type])"
+ initSelector: "input[type='text'], input[type='search'], :jqmData(type='search'), input[type='number'], :jqmData(type='number'), input[type='password'], input[type='email'], input[type='url'], input[type='tel'], textarea, input[type='time'], input[type='date'], input[type='month'], input[type='week'], input[type='datetime'], input[type='datetime-local'], input:not([type])"
},
_create: function() {

0 comments on commit 4ce1bfb

Please sign in to comment.