Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add Control Group options demo, clean up some demos

  • Loading branch information...
commit 3f259c2c0b3f26e9a5ab28d872a1114dda2e7d1a 1 parent f51b063
@jtsage authored
View
7 demos/opt/limit.html
@@ -142,7 +142,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
<label for="calrlimit2">Ending Date</label>
<input name="calrlimit2" type="date" data-role="datebox" data-options='{"minDays": -10, "maxDays": 10, "mode": "calbox"}' id="calrlimit2" />
</div>
-
+ <a href="#sourceCALRLIMIT" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceCALRLIMIT" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;label for="calrlimit1"&gt;Beginning Date&lt;/label&gt;
&lt;input name="calrlimit1" type="date" data-role="datebox" id="calrlimit1"
@@ -164,6 +165,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
$('#calrlimit2').data('datebox').options.maxDays = diffend;
});</pre>
</div>
+ </div>
<div data-role="collapsible">
<h2>Date Range Input</h2>
<p>Demonstrates using date picker and a text box to enter a date range (customizable)</p>
@@ -206,6 +208,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
<input id="drorangeend" type="text" />
</div>
+ <a href="#sourceDRORANGE" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceDRORANGE" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;label for="drorangestart"&gt;Start Date:&lt;/label&gt;
&lt;input name="drorangestart" type="date" data-role="datebox" id="drorangestart"/&gt;
@@ -245,6 +249,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
updateEndDate();
});</pre>
</div>
+ </div>
<div data-role="collapsible">
<h2>Blacklisted and Highlighted Days</h2>
<p>Example shows all Tuesdays disabled, Saturdays Highlighted</p>
View
134 demos/opt/open.html
@@ -92,19 +92,141 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
$('#linkmode').datebox('open');
});
</script>
-
- <strong>HTML</strong>
- <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
+ <a href="#sourceLINKMODE" data-rel="popup" data-role="button" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceLINKMODE" class="ui-content">
+ <strong>HTML</strong>
+ <pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
&lt;input name="mydate" id="mydate" type="date" data-role="datebox"
data-options='{"noButton": true}'&gt;
&lt;a href="#" id="linkmodelink"&gt;Open Link&lt;/a&gt;</pre>
-
- <strong>jQuery</strong>
- <pre class="prettyprint">$('#linkmodelink').live('click', function() {
+ <strong>jQuery</strong>
+ <pre class="prettyprint">$('#linkmodelink').live('click', function() {
$('#mydate').datebox('open');
});</pre>
+ </div>
+ </div>
+ <div data-role="collapsible">
+ <h2>Using in control groups</h2>
@jtsage Owner
jtsage added a note

In response to #256

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ <p>You can open datebox with a standard button as part of a control group. Here's 3 examples:</p>
+
+ <p><strong>1) </strong>Just a date button in a horizontal control group. Current date is <span id="ctrlgrp1out"></span></p>
+ <div style="display:none">
+ <input name="ctrlgrp1" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp1" />
+ </div>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
+ <a href="#" id="ctrlgrp1but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
+ </div>
+ <script type="text/javascript">
+ $('#ctrlgrp1but').on('vclick', function() {
+ $('#ctrlgrp1').datebox('open');
+ });
+ $('#ctrlgrp1').bind('change', function(e,p) {
+ $('#ctrlgrp1out').text($(this).val());
+ });
+ </script>
+ <a href="#sourceCTRLGRP1" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceCTRLGRP1" class="ui-content">
+ <strong>HTML</strong>
+ <pre class="prettyprint">&lt;div style="display:none"&gt;
+ &lt;input name="ctrlgrp" type="text" data-role="datebox"
+ data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
+&lt;/div&gt;
+&lt;div data-role="controlgroup" data-type="horizontal"&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
+ &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
+&lt;/div&gt;</pre>
+ <strong>jQuery</strong>
+ <pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
+ $('#ctrlgrp').datebox('open');
+});
+$('#ctrlgrp').bind('change', function(e,p) {
+ $('#ctrlgrpout').text($(this).val());
+});</pre>
+ </div>
+
+ <p><strong>2) </strong>Just a date button in a vertical control group. Current date is <span id="ctrlgrp2out"></span></p>
+ <div style="display:none">
+ <input name="ctrlgrp2" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp1" />
+ </div>
+ <div data-role="controlgroup">
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
+ <a href="#" id="ctrlgrp2but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
+ </div>
+ <script type="text/javascript">
+ $('#ctrlgrp2but').on('vclick', function() {
+ $('#ctrlgrp2').datebox('open');
+ });
+ $('#ctrlgrp2').bind('change', function(e,p) {
+ $('#ctrlgrp2out').text($(this).val());
+ });
+ </script>
+ <a href="#sourceCTRLGRP2" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceCTRLGRP2" class="ui-content">
+ <strong>HTML</strong>
+ <pre class="prettyprint">&lt;div style="display:none"&gt;
+ &lt;input name="ctrlgrp" type="text" data-role="datebox"
+ data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
+&lt;/div&gt;
+&lt;div data-role="controlgroup"&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
+ &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
+&lt;/div&gt;</pre>
+ <strong>jQuery</strong>
+ <pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
+ $('#ctrlgrp').datebox('open');
+});
+$('#ctrlgrp').bind('change', function(e,p) {
+ $('#ctrlgrpout').text($(this).val());
+});</pre>
+ </div>
+
+ <p><strong>3) </strong>A date button in a horizontal control group, with the current date as the text</p>
+ <div style="display:none">
+ <input name="ctrlgrp3" type="text" data-role="datebox" data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp3" />
+ </div>
+ <div data-role="controlgroup" data-type="horizontal">
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="left">Left Icon</a>
+ <a href="#" id="ctrlgrp3but" data-role="button" data-icon="grid" data-iconpos="left">Set Date</a>
+ <a href="#" data-role="button" data-icon="delete" data-iconpos="right">Right Icon</a>
+ </div>
+ <script type="text/javascript">
+ $('#ctrlgrp3but').on('vclick', function() {
+ $('#ctrlgrp3').datebox('open');
+ });
+ $('#ctrlgrp3').bind('change', function(e,p) {
+ $('#ctrlgrp3but').find('.ui-btn-text').text($(this).val());
+ });
+ </script>
+ <a href="#sourceCTRLGRP3" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceCTRLGRP3" class="ui-content">
+ <strong>HTML</strong>
+ <pre class="prettyprint">&lt;div style="display:none"&gt;
+ &lt;input name="ctrlgrp" type="text" data-role="datebox"
+ data-options='{"mode": "calbox", "centerHoriz": true}' id="ctrlgrp" /&gt;
+&lt;/div&gt;
+&lt;div data-role="controlgroup" data-type="horizontal"&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="left"&gt;Left Icon&lt;/a&gt;
+ &lt;a href="#" id="ctrlgrpbut" data-role="button" data-icon="grid" data-iconpos="left"&gt;Set Date&lt;/a&gt;
+ &lt;a href="#" data-role="button" data-icon="delete" data-iconpos="right"&gt;Right Icon&lt;/a&gt;
+&lt;/div&gt;</pre>
+ <strong>jQuery</strong>
+ <pre class="prettyprint">$('#ctrlgrpbut').on('vclick', function() {
+ $('#ctrlgrp').datebox('open');
+});
+$('#ctrlgrp').bind('change', function(e,p) {
+ $('#ctrlgrpbut').find('.ui-btn-text').text($(this).val());
+});</pre>
+ </div>
+
+
+
</div>
</div>
</div>
View
7 demos/script/link.html
@@ -113,6 +113,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
</script>
<strong>RESULT</strong>
<pre class="prettyprint"><span id="checkoutput"> </span></pre>
+ <a href="#sourceADVLINKHTML" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">HTML Source</a>
+ <div data-role="popup" id="sourceADVLINKHTML" class="ui-content">
<strong>HTML</strong><pre class="prettyprint">
&lt;div id="checklinkform" data-role="fieldcontain"&gt;
&lt;label for="checkin"&gt;Check-in:&lt;/label&gt;
@@ -129,7 +131,9 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
&lt;input name="checkout_monthday" type="hidden" size="2" id="checkout_monthday" /&gt;
&lt;input name="checkout_year_month" type="hidden" size="7" id="checkout_year_month" /&gt;
&lt;/div&gt;</pre>
-
+ </div>
+ <a href="#sourceADVLINKJQ" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">jQuery Source</a>
+ <div data-role="popup" id="sourceADVLINKJQ" class="ui-content">
<strong>jQuery</strong>
<pre class="prettyprint">
linkedCheckin = function (date, name) {
@@ -168,6 +172,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
}
}</pre>
</div>
+ </div>
</div>
</div>
</div>
View
4 demos/script/linkdur.html
@@ -80,7 +80,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
dooffset();
});
</script>
-
+ <a href="#sourceLINKDUR" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceLINKDUR" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;div data-role="fieldcontain"&gt;
&lt;label for="link1"&gt;Start Time&lt;/label&gt;
@@ -109,6 +110,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
dooffset();
});</pre>
</div>
+ </div>
</div>
</div>
View
6 demos/script/linksel.html
@@ -87,7 +87,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
// ajax to somehow update the list of valid dates and times, it would need to be
// refreshed.
$(document).bind('pageshow', function() {
- updateHighDates();
+// updateHighDates();
});
// Bind the datebox event, and...
@@ -114,7 +114,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
}
});
</script>
-
+ <a href="#sourceLINKSEL" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceLINKSEL" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;label for="datetime"&gt;Date&lt;/label&gt;
&lt;input data-options='{"mode":"calbox", "overrideDateFormat":"%Y-%m-%d", "defaultValue":[2001,0,1], "calHighPicked":false, "calHighToday":false, "calHighPicked": false}' data-role="datebox" id="datetime" name="datetime" type="date" /&gt;
@@ -175,6 +176,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
});
</pre>
</div>
+ </div>
</div>
</div>
View
6 demos/script/maxdays.html
@@ -53,7 +53,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
<div data-role="collapsible-set" data-mini="true" data-theme="c" data-content-theme="d">
<div data-role="collapsible" data-collapsed="false">
- <h2>Dynamic Start Date</h2>
+ <h2>Dynamic Ending Date</h2>
<div data-role="fieldcontain">
<label for="dynend">Only till Jun 15</label>
@@ -75,7 +75,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
</script>
<p>You can dynamically set a start date for you calendar (or android mode) too.</p>
-
+ <a href="#sourceMAXDAYS" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceMAXDAYS" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;label for="dynend"&gt;Only till Jun 30&lt;/label&gt;
&lt;input name="dynend" type="text" data-role="datebox" data-options='{"mode": "calbox", "maxDays" : 30}' id="dynend" /&gt;</pre>
@@ -95,6 +96,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
$('#dynend').datebox({'maxDays': getdays()});
});</pre>
</div>
+ </div>
</div>
</div>
View
4 demos/script/start.html
@@ -71,7 +71,8 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
</script>
<p>You can dynamically set a start date for you calendar (or android mode) too.</p>
-
+ <a href="#sourceDYNSTART" data-rel="popup" data-role="button" data-theme="e" data-inline="true" data-mini="true" data-transition="pop">Source Code</a>
+ <div data-role="popup" id="sourceDYNSTART" class="ui-content">
<strong>HTML</strong>
<pre class="prettyprint">&lt;label for="mydate"&gt;Some Date&lt;/label&gt;
@@ -104,6 +105,7 @@ <h1 id="jqm-logo"><img src="../jquery-logo-db.png" alt="jQuery Mobile Framework
$('#mydate').data('datebox').options.minDays = diff;
});</pre>
</div>
+ </div>
</div>
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.