@@ -126,9 +126,9 @@ <h3>Requirements</h3>
126126
127127 < br />
128128 < h3 > Version</ h3 >
129- < p > Version 1.4.6 </ p >
129+ < p > Version 1.5.0 </ p >
130130
131- < p > Last updated on 2014-08-09 </ p >
131+ < p > Last updated on 2014-09-01 </ p >
132132 < p > jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license.</ p >
133133 < p > < a href ="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt " title ="MIT License "> MIT License</ a > </ p >
134134
@@ -525,6 +525,7 @@ <h2>Examples</h2>
525525 < li > < a href ="#slider_examples " title ="Slider Modifications "> Slider Modifications</ a > </ li >
526526 < li > < a href ="#alt_examples " title ="Alternate Field "> Alternate Fields</ a > </ li >
527527 < li > < a href ="#rest_examples " title ="Time Restraints "> Time Restraints</ a > </ li >
528+ < li > < a href ="#range_examples " title ="Time Ranges "> Time Ranges</ a > </ li >
528529 < li > < a href ="#utility_examples " title ="Utilities "> Utilities</ a > </ li >
529530 </ ul >
530531
@@ -848,17 +849,20 @@ <h3 id="rest_examples">Time Restraints</h3>
848849</ pre >
849850 </ div >
850851
852+
853+ < h3 id ="range_examples "> Time Ranges</ h3 >
854+
851855 <!-- ============= example -->
852856 < div class ="example-container ">
853857 < p > Restrict a start and end date by using onSelect and onClose events for more control over functionality:</ p >
854858 < 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 >
855859 < div >
856- < input type ="text " name ="rest_example_4_start " id ="rest_example_4_start " value ="" />
857- < input type ="text " name ="rest_example_4_end " id ="rest_example_4_end " value ="" />
860+ < input type ="text " name ="range_example_1_start " id ="range_example_1_start " value ="08/20/2014 09:22 -0400 " />
861+ < input type ="text " name ="range_example_1_end " id ="range_example_1_end " value ="08/21/2014 08:00 -0400 " />
858862 </ div >
859863< pre >
860- var startDateTextBox = $('#rest_example_4_start ');
861- var endDateTextBox = $('#rest_example_4_end ');
864+ var startDateTextBox = $('#range_example_1_start ');
865+ var endDateTextBox = $('#range_example_1_end ');
862866
863867startDateTextBox.datetimepicker({
864868 timeFormat: 'HH:mm z',
@@ -894,6 +898,79 @@ <h3 id="rest_examples">Time Restraints</h3>
894898 startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
895899 }
896900});
901+ </ pre >
902+ </ div >
903+
904+ <!-- ============= example -->
905+ < div class ="example-container ">
906+ < p > Timepicker also includes some shortcut methods for ranges:</ p >
907+ < div >
908+ < input type ="text " name ="range_example_2_start " id ="range_example_2_start " value ="21 Aug 2014 09:16 " />
909+ < input type ="text " name ="range_example_2_end " id ="range_example_2_end " value ="21 Aug 2014 10:16 " />
910+ </ div >
911+ < pre >
912+ var startDateTextBox = $('#range_example_2_start');
913+ var endDateTextBox = $('#range_example_2_end');
914+
915+ $.timepicker.datetimeRange(
916+ startDateTextBox,
917+ endDateTextBox,
918+ {
919+ minInterval: (1000*60*60), // 1hr
920+ dateFormat: 'dd M yy',
921+ timeFormat: 'HH:mm',
922+ start: {}, // start picker options
923+ end: {} // end picker options
924+ }
925+ );
926+ </ pre >
927+ </ div >
928+
929+ <!-- ============= example -->
930+ < div class ="example-container ">
931+ < p > To use only times for a time range use $.timepicker.timeRange():</ p >
932+ < div >
933+ < input type ="text " name ="range_example_3_start " id ="range_example_3_start " value ="09:16 " />
934+ < input type ="text " name ="range_example_3_end " id ="range_example_3_end " value ="10:16 " />
935+ </ div >
936+ < pre >
937+ var startTimeTextBox = $('#range_example_3_start');
938+ var endTimeTextBox = $('#range_example_3_end');
939+
940+ $.timepicker.timeRange(
941+ startTimeTextBox,
942+ endTimeTextBox,
943+ {
944+ minInterval: (1000*60*60), // 1hr
945+ timeFormat: 'HH:mm',
946+ start: {}, // start picker options
947+ end: {} // end picker options
948+ }
949+ );
950+ </ pre >
951+ </ div >
952+
953+ <!-- ============= example -->
954+ < div class ="example-container ">
955+ < p > Even though this plugin focuses on datetime, it also provides a dateRange function:</ p >
956+ < div >
957+ < input type ="text " name ="range_example_4_start " id ="range_example_4_start " value ="" />
958+ < input type ="text " name ="range_example_4_end " id ="range_example_4_end " value ="" />
959+ </ div >
960+ < pre >
961+ var startDateTextBox = $('#range_example_4_start');
962+ var endDateTextBox = $('#range_example_4_end');
963+
964+ $.timepicker.dateRange(
965+ startDateTextBox,
966+ endDateTextBox,
967+ {
968+ minInterval: (1000*60*60*24*4), // 4 days
969+ maxInterval: (1000*60*60*24*8), // 8 days
970+ start: {}, // start picker options
971+ end: {} // end picker options
972+ }
973+ );
897974</ pre >
898975 </ div >
899976
0 commit comments