Skip to content

Commit f503ab2

Browse files
trentrichardsontrentrichardson
committed
Update last mod date
2 parents 033696b + b067e36 commit f503ab2

35 files changed

+408
-312
lines changed

‎index.html

+99-29
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
.example-container input{ border: solid 1px #aaa; padding: 4px; width: 175px; }
3636
</style>
3737

38-
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/smoothness/jquery-ui.css" />
38+
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" />
3939
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-timepicker-addon.css" />
4040

4141
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
42-
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js"></script>
42+
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
4343
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
4444
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
4545
<script type="text/javascript">
@@ -122,11 +122,11 @@ <h3>Requirements</h3>
122122

123123

124124
<h3>Version</h3>
125-
<p>Version 1.0.5</p>
125+
<p>Version 1.1.0</p>
126126

127127

128-
<p>Last updated on 10/06/2012</p>
129-
128+
<p>Last updated on 11/03/2012</p>
129+
130130
<p>jQuery Timepicker Addon is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project, and use it accordingly. </p>
131131
<p><a href="http://trentrichardson.com/Impromptu/GPL-LICENSE.txt" title="GPL License">GPL License</a></p>
132132
<p><a href="http://trentrichardson.com/Impromptu/MIT-LICENSE.txt" title="MIT License">MIT License</a></p>
@@ -149,17 +149,14 @@ <h3>Localization Options</h3>
149149
<dt>closeText</dt>
150150
<dd><em>Default: "Done", A Localization Setting</em> - Text for the Close button.</dd>
151151

152-
<dt>ampm</dt>
153-
<dd><em>Default: false, A Localization Setting</em> - Whether or not to use am/pm calculations.</dd>
154-
155152
<dt>amNames</dt>
156153
<dd><em>Default: ['AM', 'A'], A Localization Setting</em> - Array of strings to try and parse against to determine AM.</dd>
157154

158155
<dt>pmNames</dt>
159156
<dd><em>Default: ['PM', 'P'], A Localization Setting</em> - Array of strings to try and parse against to determine PM.</dd>
160157

161158
<dt>timeFormat</dt>
162-
<dd><em>Default: "hh:mm tt", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting" onclick="$('#tabs').tabs('select',2);">See Formatting</a>.</dd>
159+
<dd><em>Default: "HH:mm", A Localization Setting</em> - String of format tokens to be replaced with the time. <a href="#tp-formatting" title="Formatting" onclick="$('#tabs').tabs('select',2);">See Formatting</a>.</dd>
163160

164161
<dt>timeSuffix</dt>
165162
<dd><em>Default: "", A Localization Setting</em> - String to place after the formatted time.</dd>
@@ -225,7 +222,19 @@ <h3>Time Field Options</h3>
225222
<dl class="defs">
226223

227224
<dt>controlType</dt>
228-
<dd><em>Default: 'slider'</em> - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details.</dd>
225+
<dd><em>Default: 'slider'</em> - Whether to use 'slider' or 'select'. If 'slider' is unavailable through jQueryUI, 'select' will be used. For advanced usage you may pass an object which implements "create", "options", "value" methods to use controls other than sliders or selects. See the _controls property in the source code for more details.
226+
<pre>{
227+
create: function(tp_inst, obj, unit, val, min, max, step){
228+
// generate whatever controls you want here, just return obj
229+
},
230+
options: function(tp_inst, obj, unit, opts, val){
231+
// if val==undefined return the value, else return obj
232+
},
233+
value: function(tp_inst, obj, unit, val){
234+
// if val==undefined return the value, else return obj
235+
}
236+
}</pre>
237+
</dd>
229238

230239
<dt>showHour</dt>
231240
<dd><em>Default: true</em> - Whether to show the hour slider.</dd>
@@ -326,6 +335,12 @@ <h3>Other Options</h3>
326335
<dt>separator</dt>
327336
<dd><em>Default: " "</em> - When formatting the time this string is placed between the formatted date and formatted time.</dd>
328337

338+
<dt>pickerTimeFormat</dt>
339+
<dd><em>Default: (timeFormat option)</em> - How to format the time displayed within the timepicker.</dd>
340+
341+
<dt>pickerTimeSuffix</dt>
342+
<dd><em>Default: (timeSuffix option)</em> - String to place after the formatted time within the timepicker.</dd>
343+
329344
<dt>showTimepicker</dt>
330345
<dd><em>Default: true</em> - Whether to show the timepicker within the datepicker.</dd>
331346

@@ -343,6 +358,17 @@ <h3>Other Options</h3>
343358

344359
<dt>maxDateTime</dt>
345360
<dd><em>Default: null</em> - Date object of the maximum datetime allowed. Also Available as maxDate.</dd>
361+
362+
<dt>parse</dt>
363+
<dd><em>Default: 'strict'</em> - How to parse the time string. Two methods are provided: 'strict' which must match the timeFormat exactly, and 'loose' which uses javascript's new Date(timeString) to guess the time. You may also pass in a function(timeFormat, timeString, options) to handle the parsing yourself, returning a simple object:
364+
<pre>{
365+
hour: 19,
366+
minutes: 10,
367+
seconds: 23,
368+
millisec: 45,
369+
timezone: '-0400'
370+
}</pre>
371+
</dd>
346372
</dl>
347373

348374
</div>
@@ -355,11 +381,13 @@ <h3>Other Options</h3>
355381

356382
<h2>Formatting Your Time</h2>
357383

358-
<p>The default format is "hh:mm tt", however ampm is turned off by default, so you will see "hh:mm"</p>
384+
<p>The default format is "HH:mm". To use 12 hour time use something similar to: "hh:mm tt". When both "t" and lower case "h" are present in the timeFormat, 12 hour time will be used.</p>
359385

360386
<dl class="defs">
361-
<dt>h</dt><dd>Hour with no leading 0</dd>
362-
<dt>hh</dt><dd>Hour with leading 0</dd>
387+
<dt>H</dt><dd>Hour with no leading 0 (24 hour)</dd>
388+
<dt>HH</dt><dd>Hour with leading 0 (24 hour)</dd>
389+
<dt>h</dt><dd>Hour with no leading 0 (12 hour)</dd>
390+
<dt>hh</dt><dd>Hour with leading 0 (12 hour)</dd>
363391
<dt>m</dt><dd>Minute with no leading 0</dd>
364392
<dt>mm</dt><dd>Minute with leading 0</dd>
365393
<dt>s</dt><dd>Second with no leading 0</dd>
@@ -377,6 +405,7 @@ <h2>Formatting Your Time</h2>
377405
<ul>
378406
<li>timeFormat option</li>
379407
<li>altTimeFormat option</li>
408+
<li>pickerTimeFormat option</li>
380409
<li>$.datepicker.formatTime(format, timeObj, options) utility method</li>
381410
<li>$.datepicker.parseTime(format, timeStr, options) utility method</li>
382411
</ul>
@@ -439,10 +468,9 @@ <h2>Working with Localizations</h2>
439468
timezoneText: 'Часовой пояс',
440469
currentText: 'Сейчас',
441470
closeText: 'Закрыть',
442-
timeFormat: 'hh:mm tt',
471+
timeFormat: 'HH:mm',
443472
amNames: ['AM', 'A'],
444473
pmNames: ['PM', 'P'],
445-
ampm: false,
446474
isRTL: false
447475
};
448476
$.timepicker.setDefaults($.timepicker.regional['ru']);
@@ -499,8 +527,7 @@ <h3 id="basic_examples">Basic Initializations</h3>
499527
</div>
500528
<pre>
501529
$('#basic_example_3').datetimepicker({
502-
timeFormat: "h:m t",
503-
ampm: true
530+
timeFormat: "hh:mm tt"
504531
});
505532
</pre>
506533
</div>
@@ -515,7 +542,7 @@ <h3 id="timezone_examples">Using Timezones</h3>
515542
</div>
516543
<pre>
517544
$('#timezone_example_1').datetimepicker({
518-
timeFormat: 'hh:mm z',
545+
timeFormat: 'hh:mm tt z',
519546
showTimezone: true
520547
});
521548
</pre>
@@ -529,7 +556,7 @@ <h3 id="timezone_examples">Using Timezones</h3>
529556
</div>
530557
<pre>
531558
$('#timezone_example_2').datetimepicker({
532-
timeFormat: 'hh:mm z',
559+
timeFormat: 'HH:mm z',
533560
showTimezone: true,
534561
timezoneList: [
535562
{ value: '-0500', label: 'Eastern'},
@@ -549,7 +576,7 @@ <h3 id="timezone_examples">Using Timezones</h3>
549576
</div>
550577
<pre>
551578
$('#timezone_example_3').datetimepicker({
552-
timeFormat: 'hh:mm z',
579+
timeFormat: 'HH:mm z',
553580
showTimezone: true,
554581
timezone: 'MT',
555582
timezoneList: [
@@ -574,7 +601,8 @@ <h3 id="slider_examples">Slider Modifications</h3>
574601
<pre>
575602
$('#slider_example_1').timepicker({
576603
hourGrid: 4,
577-
minuteGrid: 10
604+
minuteGrid: 10,
605+
timeFormat: 'hh:mm tt'
578606
});
579607
</pre>
580608
</div>
@@ -588,7 +616,7 @@ <h3 id="slider_examples">Slider Modifications</h3>
588616
<pre>
589617
$('#slider_example_2').datetimepicker({
590618
showSecond: true,
591-
timeFormat: 'hh:mm:ss',
619+
timeFormat: 'HH:mm:ss',
592620
stepHour: 2,
593621
stepMinute: 10,
594622
stepSecond: 10
@@ -618,7 +646,50 @@ <h3 id="slider_examples">Slider Modifications</h3>
618646
<pre>
619647
$('#slider_example_4').datetimepicker({
620648
controlType: 'select',
621-
ampm: true
649+
timeFormat: 'hh:mm tt'
650+
});</pre>
651+
</div>
652+
653+
<!-- ============= example -->
654+
<div class="example-container">
655+
<p>Create your own control by implementing the create, options, and value methods. If you want to use your new control for all instances use the $.timepicker.setDefaults({controlType:myControl}). Here we implement jQueryUI's spinner control (jQueryUI 1.9+).</p>
656+
<div>
657+
<input type="text" name="slider_example_5" id="slider_example_5" value="" />
658+
</div>
659+
<pre>var myControl= {
660+
create: function(tp_inst, obj, unit, val, min, max, step){
661+
$('&lt;input class="ui-timepicker-input" value="'+val+'" style="width:50%"&gt;')
662+
.appendTo(obj)
663+
.spinner({
664+
min: min,
665+
max: max,
666+
step: step,
667+
change: function(e,ui){ // key events
668+
tp_inst._onTimeChange();
669+
tp_inst._onSelectHandler();
670+
},
671+
spin: function(e,ui){ // spin events
672+
tp_inst.control.value(tp_inst, obj, unit, ui.value);
673+
tp_inst._onTimeChange();
674+
tp_inst._onSelectHandler();
675+
}
676+
});
677+
return obj;
678+
},
679+
options: function(tp_inst, obj, unit, opts, val){
680+
if(typeof(opts) == 'string' && val !== undefined)
681+
return obj.find('.ui-timepicker-input').spinner(opts, val);
682+
return obj.find('.ui-timepicker-input').spinner(opts);
683+
},
684+
value: function(tp_inst, obj, unit, val){
685+
if(val !== undefined)
686+
return obj.find('.ui-timepicker-input').spinner('value', val);
687+
return obj.find('.ui-timepicker-input').spinner('value');
688+
}
689+
};
690+
691+
$('#slider_example_5').datetimepicker({
692+
controlType: myControl
622693
});</pre>
623694
</div>
624695

@@ -662,10 +733,11 @@ <h3 id="alt_examples">Alternate Fields</h3>
662733
</div>
663734
<pre>
664735
$('#alt_example_3').datetimepicker({
736+
ampm: true,
665737
altField: "#alt_example_3_alt",
666738
altFieldTimeOnly: false,
667739
altFormat: "yy-mm-dd",
668-
altTimeFormat: "h:m",
740+
altTimeFormat: "h:m t",
669741
altSeparator: " @ "
670742
});
671743
</pre>
@@ -696,7 +768,6 @@ <h3 id="rest_examples">Time Restraints</h3>
696768
</div>
697769
<pre>
698770
$('#rest_example_1').timepicker({
699-
ampm: true,
700771
hourMin: 8,
701772
hourMax: 16
702773
});
@@ -795,8 +866,7 @@ <h3 id="utility_examples">Utilities</h3>
795866

796867
ex13.datetimepicker({
797868
dateFormat: "D MM d, yy",
798-
separator: ' @ ',
799-
ampm: true
869+
separator: ' @ '
800870
});
801871

802872
$('#utility_example_1_setdt').click(function(){
@@ -824,7 +894,7 @@ <h3 id="utility_examples">Utilities</h3>
824894

825895
<pre>
826896
$('#utility_example_2').text(
827-
$.datepicker.formatTime('hh:mm z', { hour: 14, minute: 36, timezone: '+2000' }, { ampm: false })
897+
$.datepicker.formatTime('HH:mm z', { hour: 14, minute: 36, timezone: '+2000' }, {})
828898
);
829899
</pre>
830900
</div>
@@ -844,7 +914,7 @@ <h3 id="utility_examples">Utilities</h3>
844914

845915
<pre>
846916
$('#utility_example_3').text(JSON.stringify(
847-
$.datepicker.parseTime('hh:mm:ss:l z', "14:36:21:765 +2000", { ampm: false })
917+
$.datepicker.parseTime('HH:mm:ss:l z', "14:36:21:765 +2000", {})
848918
));
849919
</pre>
850920
</div>

‎jquery-ui-sliderAccess.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
/*
22
* jQuery UI Slider Access
33
* By: Trent Richardson [http://trentrichardson.com]
4-
* Version 0.2
5-
* Last Modified: 12/02/2011
4+
* Version 0.3
5+
* Last Modified: 10/20/2012
66
*
77
* Copyright 2011 Trent Richardson
88
* Dual licensed under the MIT and GPL licenses.
@@ -50,7 +50,9 @@
5050
curr = $t.slider('value'),
5151
newval = curr += step*1,
5252
minval = $t.slider('option','min'),
53-
maxval = $t.slider('option','max');
53+
maxval = $t.slider('option','max'),
54+
slidee = $t.slider("option", "slide") || function(){},
55+
stope = $t.slider("option", "stop") || function(){};
5456

5557
e.preventDefault();
5658

@@ -59,7 +61,8 @@
5961

6062
$t.slider('value', newval);
6163

62-
$t.slider("option", "slide").call($t, null, { value: newval });
64+
slidee.call($t, null, { value: newval });
65+
stope.call($t, null, { value: newval });
6366
});
6467
});
6568

0 commit comments

Comments
 (0)