@@ -126,9 +126,9 @@ <h3>Requirements</h3>
126
126
127
127
< br />
128
128
< h3 > Version</ h3 >
129
- < p > Version 1.4.6 </ p >
129
+ < p > Version 1.5.0 </ p >
130
130
131
- < p > Last updated on 2014-08-09 </ p >
131
+ < p > Last updated on 2014-09-01 </ p >
132
132
< p > jQuery Timepicker Addon is currently available for use in all personal or commercial projects under the MIT license.</ p >
133
133
< p > < a href ="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt " title ="MIT License "> MIT License</ a > </ p >
134
134
@@ -525,6 +525,7 @@ <h2>Examples</h2>
525
525
< li > < a href ="#slider_examples " title ="Slider Modifications "> Slider Modifications</ a > </ li >
526
526
< li > < a href ="#alt_examples " title ="Alternate Field "> Alternate Fields</ a > </ li >
527
527
< 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 >
528
529
< li > < a href ="#utility_examples " title ="Utilities "> Utilities</ a > </ li >
529
530
</ ul >
530
531
@@ -848,17 +849,20 @@ <h3 id="rest_examples">Time Restraints</h3>
848
849
</ pre >
849
850
</ div >
850
851
852
+
853
+ < h3 id ="range_examples "> Time Ranges</ h3 >
854
+
851
855
<!-- ============= example -->
852
856
< div class ="example-container ">
853
857
< p > Restrict a start and end date by using onSelect and onClose events for more control over functionality:</ p >
854
858
< 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 >
855
859
< 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 " />
858
862
</ div >
859
863
< 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 ');
862
866
863
867
startDateTextBox.datetimepicker({
864
868
timeFormat: 'HH:mm z',
@@ -894,6 +898,79 @@ <h3 id="rest_examples">Time Restraints</h3>
894
898
startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
895
899
}
896
900
});
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
+ );
897
974
</ pre >
898
975
</ div >
899
976
0 commit comments