Improves $.timepicker.log argument pass through, add range example section to docs

1 files changed, 33 insertions, 4 deletions

diff --git a/src/docs/examples.html b/src/docs/examples.html
index 587b0f1..799c372 100644
--- a/src/docs/examples.html
+++ b/src/docs/examples.html
@@ -10,6 +10,7 @@
 		<li><a href="#slider_examples" title="Slider Modifications">Slider Modifications</a></li>
 		<li><a href="#alt_examples" title="Alternate Field">Alternate Fields</a></li>
 		<li><a href="#rest_examples" title="Time Restraints">Time Restraints</a></li>
+		<li><a href="#range_examples" title="Time Ranges">Time Ranges</a></li>
 		<li><a href="#utility_examples" title="Utilities">Utilities</a></li>
 	</ul>
 
@@ -333,17 +334,20 @@ $('#rest_example_3').datetimepicker({
 </pre>
 	</div>
 
+
+	<h3 id="range_examples">Time Ranges</h3>
+
 	<!-- ============= example -->
 	<div class="example-container">
 		<p>Restrict a start and end date by using onSelect and onClose events for more control over functionality:</p>
 		<p>For more examples and advanced usage grab the <a href="http://trentrichardson.com/ebooks/handling-time/" title="Handling Time eBook">Handling Time eBook</a>.</p>
 		<div>
-	 		<input type="text" name="rest_example_4_start" id="rest_example_4_start" value="" /> 
-	 		<input type="text" name="rest_example_4_end" id="rest_example_4_end" value="" />
+	 		<input type="text" name="range_example_1_start" id="range_example_1_start" value="08/20/2014 09:22 -0400" /> 
+	 		<input type="text" name="range_example_1_end" id="range_example_1_end" value="08/21/2014 08:00 -0400" />
 		</div>					
 <pre>
-var startDateTextBox = $('#rest_example_4_start');
-var endDateTextBox = $('#rest_example_4_end');
+var startDateTextBox = $('#range_example_1_start');
+var endDateTextBox = $('#range_example_1_end');
 
 startDateTextBox.datetimepicker({ 
 	timeFormat: 'HH:mm z',
@@ -382,6 +386,31 @@ endDateTextBox.datetimepicker({
 </pre>
 	</div>
 
+		<!-- ============= example -->
+	<div class="example-container">
+		<p>Timepicker also includes some shortcut methods for ranges:</p>
+		<div>
+	 		<input type="text" name="range_example_2_start" id="range_example_2_start" value="21 Aug 2014 09:16" /> 
+	 		<input type="text" name="range_example_2_end" id="range_example_2_end" value="21 Aug 2014 10:16" />
+		</div>					
+<pre>
+var startDateTextBox = $('#range_example_2_start');
+var endDateTextBox = $('#range_example_2_end');
+
+$.timepicker.datetimeRange(
+    startDateTextBox,
+    endDateTextBox,
+    {
+        minInterval: (1000*60*60),
+        dateFormat: 'dd M yy', 
+        timeFormat: 'HH:mm',
+        start: {}, // start picker options
+        end: {} // end picker options					
+    }
+);
+</pre>
+	</div>
+
 	<h3 id="utility_examples">Utilities</h3>
 
 	<!-- ============= example -->