jquery-mobile/experiments/ui-datepicker/index.html

<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Framework - Datepicker</title> 
	<link rel="stylesheet"  href="../../themes/default/" />	
	<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />
	<link rel="stylesheet"  href="jquery.ui.datepicker.mobile.css" /> 
	<script src="../../js/jquery.js"></script>	
	<script>
		//reset type=date inputs to text
		$( document ).bind( "mobileinit", function(){
			$.mobile.page.prototype.options.degradeInputs.date = true;
		});	
	</script>
	<script src="../../js/"></script>	
	<script src="jQuery.ui.datepicker.js"></script>
	<script src="jquery.ui.datepicker.mobile.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>jQuery UI's Datepicker Styled for mobile</h1>		
	</div>
	
	<div data-role="content">
		<p>The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you'll need to include the files yourself if you'd like to use them. Scroll down for usage instructions.</p>
		
		<form action="#" method="get">
			<div data-role="fieldcontain">
	     	    <label for="date">Date Input:</label>
	     	    <input type="date" name="date" id="date" value=""  />
			</div>		
		</form>
		
		
		<h2>Usage Instructions</h2>
		
		<p>The datepicker auto-generates from a regular <code>input</code> element with a <code>type="date"</code> attribute.</p>
		
		<pre><code>
&lt;label for=&quot;date&quot;&gt;Date Input:&lt;/label&gt;
&lt;input type=&quot;date&quot; name=&quot;date&quot; id=&quot;date&quot; value=&quot;&quot;  /&gt;		
		</code></pre>
		
		<p>We'd recommend wrapping the label and input in a fieldcontain div for presentation purposes, and these elements should be placed within a <code>form</code> element for C-Grade browser accessibility.</p>
		
		<p><strong>Note:</strong> This plugin is not included in jQuery Mobile by default, so you'll need to include the following files in order to use it:</p>
		
<pre><code>
  &lt;link rel=&quot;stylesheet&quot; href=&quot;jquery.ui.datepicker.mobile.css&quot; /&gt; 
  &lt;script src=&quot;jQuery.ui.datepicker.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;jquery.ui.datepicker.mobile.js&quot;&gt;&lt;/script&gt;
</code></pre>
		
		<p>You'll also want to configure the page plugin to convert "date" input elements to "text" inputs after they're enhanced with our datepicker, so that no native datepicker will conflict with the custom one we're adding. To do this, bind to the "mobileinit" event and set input types of "date" back to text using the page plugin's options:</p>
<pre><code>	
&lt;script&gt;
  //reset type=date inputs to text
  $( document ).bind( &quot;mobileinit&quot;, function(){
    $.mobile.page.prototype.options.degradeInputs.date = true;
  });	
&lt;/script&gt;	
</code></pre>

<p>Be sure to place this event binding in a script that loads after jQuery, but before jQuery Mobile. Check this page's source for an example.</p>
	
	
	</div>
	
</div>
		

</body>
</html>
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`<!DOCTYPE html>`
			`<html>`
set utf-8 2010-11-02 01:46:29 +00:00			`<head>`
Added viewport meta elements to the markup of every template and removed the metaViewportContent option from code and docs. IE does not support generated viewport tags. 2011-02-18 20:00:18 +00:00			`<meta charset="utf-8">`
Ya'll can scale your pages now. Fixes #1645. Note: we originally disabled user zooming to work around a bug in iOS that automatically zooms the page beyond the constraints of the viewport on orientation change. We are not working around this bug at all now, but you are free to include any meta tag you'd like, or better yet, consider this polyfill: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ 2011-05-17 21:28:19 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1">`
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`<title>jQuery Mobile Framework - Datepicker</title>`
Sweep through all files to add a trailing slash to <link> tags that include thems/default. This should fix Opera Mobile Issue 763. 2011-01-06 00:19:24 +00:00			`<link rel="stylesheet" href="../../themes/default/" />`
Updated the datepicker workaround to be functional; also added a few style overrides and events to update the datepicker markup on load and click (necessary because it's redrawn) 2010-12-29 14:36:48 +00:00			`<link rel="stylesheet" href="../../docs/_assets/css/jqm-docs.css" />`
refactored Maggie's datepicker edits so that they overwrite & extend the UI's datepicker plugin and automatically convert type=date inputs to datepickers when the scripts are included. These changes make the datepicker plugin good enough to offer as an optional extension to jQuery Mobile (but not include it in the build by default, as it needs to be rewritten first - far too heavy to include unless you need it!). 2011-01-27 01:28:52 +00:00			`<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />`
			`<script src="../../js/jquery.js"></script>`
			`<script>`
			`//reset type=date inputs to text`
			`$( document ).bind( "mobileinit", function(){`
			`$.mobile.page.prototype.options.degradeInputs.date = true;`
			`});`
			`</script>`
			`<script src="../../js/"></script>`
			`<script src="jQuery.ui.datepicker.js"></script>`
			`<script src="jquery.ui.datepicker.mobile.js"></script>`
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`</head>`
			`<body>`

			`<div data-role="page">`
Updated the datepicker workaround to be functional; also added a few style overrides and events to update the datepicker markup on load and click (necessary because it's redrawn) 2010-12-29 14:36:48 +00:00
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`<div data-role="header">`
improved datepicker usage instructions and linked it up from the forms index under "experimental" 2011-01-27 01:48:25 +00:00			`<h1>jQuery UI's Datepicker Styled for mobile</h1>`
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`</div>`

			`<div data-role="content">`
improved datepicker usage instructions and linked it up from the forms index under "experimental" 2011-01-27 01:48:25 +00:00			`<p>The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you'll need to include the files yourself if you'd like to use them. Scroll down for usage instructions.</p>`

moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`<form action="#" method="get">`
			`<div data-role="fieldcontain">`
Updated the datepicker workaround to be functional; also added a few style overrides and events to update the datepicker markup on load and click (necessary because it's redrawn) 2010-12-29 14:36:48 +00:00			`<label for="date">Date Input:</label>`
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`<input type="date" name="date" id="date" value="" />`
refactored Maggie's datepicker edits so that they overwrite & extend the UI's datepicker plugin and automatically convert type=date inputs to datepickers when the scripts are included. These changes make the datepicker plugin good enough to offer as an optional extension to jQuery Mobile (but not include it in the build by default, as it needs to be rewritten first - far too heavy to include unless you need it!). 2011-01-27 01:28:52 +00:00			`</div>`
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00			`</form>`
improved datepicker usage instructions and linked it up from the forms index under "experimental" 2011-01-27 01:48:25 +00:00

			`<h2>Usage Instructions</h2>`

added markup example to datepicker documentation 2011-01-27 01:53:13 +00:00			`<p>The datepicker auto-generates from a regular <code>input</code> element with a <code>type="date"</code> attribute.</p>`

			`<pre><code>`
			`<label for="date">Date Input:</label>`
			`<input type="date" name="date" id="date" value="" />`
			`</code></pre>`

			`<p>We'd recommend wrapping the label and input in a fieldcontain div for presentation purposes, and these elements should be placed within a <code>form</code> element for C-Grade browser accessibility.</p>`

			`<p><strong>Note:</strong> This plugin is not included in jQuery Mobile by default, so you'll need to include the following files in order to use it:</p>`
improved datepicker usage instructions and linked it up from the forms index under "experimental" 2011-01-27 01:48:25 +00:00
			`<pre><code>`
			`<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />`
			`<script src="jQuery.ui.datepicker.js"></script>`
			`<script src="jquery.ui.datepicker.mobile.js"></script>`
			`</code></pre>`

			`<p>You'll also want to configure the page plugin to convert "date" input elements to "text" inputs after they're enhanced with our datepicker, so that no native datepicker will conflict with the custom one we're adding. To do this, bind to the "mobileinit" event and set input types of "date" back to text using the page plugin's options:</p>`
			`<pre><code>`
			`<script>`
			`//reset type=date inputs to text`
			`$( document ).bind( "mobileinit", function(){`
			`$.mobile.page.prototype.options.degradeInputs.date = true;`
			`});`
			`</script>`
			`</code></pre>`

			`<p>Be sure to place this event binding in a script that loads after jQuery, but before jQuery Mobile. Check this page's source for an example.</p>`

added markup example to datepicker documentation 2011-01-27 01:53:13 +00:00

improved datepicker usage instructions and linked it up from the forms index under "experimental" 2011-01-27 01:48:25 +00:00
moved datepicker demo to experiments 2010-10-06 04:16:43 +00:00
			`</div>`

			`</div>`



			`</body>`
			`</html>`