Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-04-30 19:04:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source 
Types added: input type time, date, month, week, date time,
datetime-local to auto for enhancements.
This commit is contained in:
toddparker 2011-10-15 09:33:06 -04:00
parent 739373ee79
commit 4ce1bfb795
2 changed files with 34 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
docs/forms/textinputs/index.html
View file

@ -37,7 +37,7 @@
<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 @@
<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>

2
js/jquery.mobile.forms.textinput.js
View file

@ -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() {