diff options
Diffstat (limited to 'src/docs/examples.html')
| -rw-r--r-- | src/docs/examples.html | 85 |
1 files changed, 81 insertions, 4 deletions
diff --git a/src/docs/examples.html b/src/docs/examples.html index 587b0f1..4765039 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,79 @@ 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), // 1hr + dateFormat: 'dd M yy', + timeFormat: 'HH:mm', + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + + <!-- ============= example --> + <div class="example-container"> + <p>To use only times for a time range use $.timepicker.timeRange():</p> + <div> + <input type="text" name="range_example_3_start" id="range_example_3_start" value="09:16" /> + <input type="text" name="range_example_3_end" id="range_example_3_end" value="10:16" /> + </div> +<pre> +var startTimeTextBox = $('#range_example_3_start'); +var endTimeTextBox = $('#range_example_3_end'); + +$.timepicker.timeRange( + startTimeTextBox, + endTimeTextBox, + { + minInterval: (1000*60*60), // 1hr + timeFormat: 'HH:mm', + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + + <!-- ============= example --> + <div class="example-container"> + <p>Even though this plugin focuses on datetime, it also provides a dateRange function:</p> + <div> + <input type="text" name="range_example_4_start" id="range_example_4_start" value="" /> + <input type="text" name="range_example_4_end" id="range_example_4_end" value="" /> + </div> +<pre> +var startDateTextBox = $('#range_example_4_start'); +var endDateTextBox = $('#range_example_4_end'); + +$.timepicker.dateRange( + startDateTextBox, + endDateTextBox, + { + minInterval: (1000*60*60*24*4), // 4 days + maxInterval: (1000*60*60*24*8), // 8 days + start: {}, // start picker options + end: {} // end picker options + } +); +</pre> + </div> + <h3 id="utility_examples">Utilities</h3> <!-- ============= example --> |