@@ -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