Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Add disable / enable options. Add example for selecting time range (s…

…tart time and end time).

Renamed stylesheet file to match jQuery UI naming style.
  • Loading branch information...
commit e2108a9c83626087b30896f055894b072b120379 1 parent 92fcd9c
@fgelinas authored
View
194 index.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>jQuery UI Time Picker by Francois Gelinas</title>
<link rel="stylesheet" href="include/jquery-ui-1.8.14.custom.css" type="text/css" />
- <link rel="stylesheet" href="jquery-ui-timepicker.css?v=0.2.4" type="text/css" />
+ <link rel="stylesheet" href="jquery.ui.timepicker.css?v=0.2.5" type="text/css" />
<!-- uncomment to test with legacy jquery -->
<!--
@@ -19,7 +19,7 @@
<script type="text/javascript" src="include/jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="include/jquery.ui.position.min.js"></script>
- <script type="text/javascript" src="jquery.ui.timepicker.js?v=0.2.4"></script>
+ <script type="text/javascript" src="jquery.ui.timepicker.js?v=0.2.5"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<style type="text/css">
@@ -106,7 +106,7 @@
<li><a href="#usage">Usage</a></li>
<li><a href="#requirements">Requirements</a></li>
<li><a href="#release_notes">Release notes</a></li>
- <li><a href="#get_timepicker">Get Timepicker version 0.2.4</a></li>
+ <li><a href="#get_timepicker">Get Timepicker version 0.2.5</a></li>
</ul>
<div id="examples">
@@ -226,7 +226,7 @@
style="width: 16px; height:16px; background: url(include/ui-lightness/images/ui-icons_222222_256x240.png) -80px, -96px;
display: inline-block; border-radius: 2px; border: 1px solid #222222; margin-top: 3px; cursor:pointer"></div>
<button class='timepicker_button_trigger' id="btn_trigger_timepicker">Show</button>
-
+ <button id="btn_change_showon">Change showOn to focus</button>
<script type="text/javascript">
@@ -237,6 +237,11 @@
showLeadingZero: false,
timeSeparator: 'h'
});
+
+ $('#btn_change_showon').click(function() {
+ $('#timepicker_showon').timepicker('option', 'showLeadingZero', true );
+ });
+
});
</script>
@@ -445,6 +450,171 @@
</div>
+
+ <hr />
+
+ <div>
+
+ Two timepickers to select chronological time range, the first timepicker is restricted to before the time selected in the second timepicker, and vice versa.
+ <br>
+ Start time :
+ <input type="text" style="width: 70px" id="timepicker_start" value="9:15" />
+ end time :
+ <input type="text" style="width: 70px" id="timepicker_end" value="16:30" />
+
+ <a onclick="$('#script_time_range').toggle(200); return false;">[Show code]</a>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $('#timepicker_start').timepicker({
+ showLeadingZero: false,
+ onHourShow: tpStartOnHourShowCallback,
+ onMinuteShow: tpStartOnMinuteShowCallback
+ });
+ $('#timepicker_end').timepicker({
+ showLeadingZero: false,
+ onHourShow: tpEndOnHourShowCallback,
+ onMinuteShow: tpEndOnMinuteShowCallback
+ });
+ });
+
+ function tpStartOnHourShowCallback(hour) {
+ var tpEndHour = $('#timepicker_end').timepicker('getHour');
+ // Check if proposed hour is prior or equal to selected end time hour
+ if (hour <= tpEndHour) { return true; }
+ // if hour did not match, it can not be selected
+ return false;
+ }
+ function tpStartOnMinuteShowCallback(hour, minute) {
+ var tpEndHour = $('#timepicker_end').timepicker('getHour');
+ var tpEndMinute = $('#timepicker_end').timepicker('getMinute');
+ // Check if proposed hour is prior to selected end time hour
+ if (hour < tpEndHour) { return true; }
+ // Check if proposed hour is equal to selected end time hour and minutes is prior
+ if ( (hour == tpEndHour) && (minute < tpEndMinute) ) { return true; }
+ // if minute did not match, it can not be selected
+ return false;
+ }
+
+ function tpEndOnHourShowCallback(hour) {
+ var tpStartHour = $('#timepicker_start').timepicker('getHour');
+ // Check if proposed hour is after or equal to selected start time hour
+ if (hour >= tpStartHour) { return true; }
+ // if hour did not match, it can not be selected
+ return false;
+ }
+ function tpEndOnMinuteShowCallback(hour, minute) {
+ var tpStartHour = $('#timepicker_start').timepicker('getHour');
+ var tpStartMinute = $('#timepicker_start').timepicker('getMinute');
+ // Check if proposed hour is after selected start time hour
+ if (hour > tpStartHour) { return true; }
+ // Check if proposed hour is equal to selected start time hour and minutes is after
+ if ( (hour == tpStartHour) && (minute > tpStartMinute) ) { return true; }
+ // if minute did not match, it can not be selected
+ return false;
+ }
+
+ </script>
+
+<pre class="code" id="script_time_range" style="display: none">
+$(document).ready(function() {
+ $('#timepicker_start').timepicker({
+ showLeadingZero: false,
+ onHourShow: tpStartOnHourShowCallback,
+ onMinuteShow: tpStartOnMinuteShowCallback
+ });
+ $('#timepicker_end').timepicker({
+ showLeadingZero: false,
+ onHourShow: tpEndOnHourShowCallback,
+ onMinuteShow: tpEndOnMinuteShowCallback
+ });
+});
+
+function tpStartOnHourShowCallback(hour) {
+ var tpEndHour = $('#timepicker_end').timepicker('getHour');
+ // Check if proposed hour is prior or equal to selected end time hour
+ if (hour <= tpEndHour) { return true; }
+ // if hour did not match, it can not be selected
+ return false;
+}
+function tpStartOnMinuteShowCallback(hour, minute) {
+ var tpEndHour = $('#timepicker_end').timepicker('getHour');
+ var tpEndMinute = $('#timepicker_end').timepicker('getMinute');
+ // Check if proposed hour is prior to selected end time hour
+ if (hour < tpEndHour) { return true; }
+ // Check if proposed hour is equal to selected end time hour and minutes is prior
+ if ( (hour == tpEndHour) && (minute < tpEndMinute) ) { return true; }
+ // if minute did not match, it can not be selected
+ return false;
+}
+
+function tpEndOnHourShowCallback(hour) {
+ var tpStartHour = $('#timepicker_start').timepicker('getHour');
+ // Check if proposed hour is after or equal to selected start time hour
+ if (hour >= tpStartHour) { return true; }
+ // if hour did not match, it can not be selected
+ return false;
+}
+function tpEndOnMinuteShowCallback(hour, minute) {
+ var tpStartHour = $('#timepicker_start').timepicker('getHour');
+ var tpStartMinute = $('#timepicker_start').timepicker('getMinute');
+ // Check if proposed hour is after selected start time hour
+ if (hour > tpStartHour) { return true; }
+ // Check if proposed hour is equal to selected start time hour and minutes is after
+ if ( (hour == tpStartHour) && (minute > tpStartMinute) ) { return true; }
+ // if minute did not match, it can not be selected
+ return false;
+}
+</pre>
+
+ </div>
+
+
+
+ <hr />
+
+ <div>
+ Example to disable and re-enable a timepicker.
+ <br />
+ <div id="timepicker_disable_inline" style="font-size: 10px; float: left;"></div>
+ <input type="text" style="width: 70px" id="timepicker_disable" value="9:15" />
+ <br />
+ <button id="btn_disable_tp">Disable the time pickers</button>
+ <br />
+ <button id="btn_enable_tp">Re-enable the time pickers</button>
+ <br />
+ <a onclick="$('#script_tp_disable').toggle(200); return false;">[Show code]</a>
+ <div style="clear: both"></div>
+
+ <script type="text/javascript">
+ $(document).ready(function() {
+ $('#timepicker_disable_inline').timepicker();
+ $('#timepicker_disable').timepicker({showLeadingZero: false });
+ $('#btn_disable_tp').click(function() {
+ $('#timepicker_disable_inline').timepicker('disable');
+ $('#timepicker_disable').timepicker('disable');
+ });
+ $('#btn_enable_tp').click(function() {
+ $('#timepicker_disable_inline').timepicker('enable');
+ $('#timepicker_disable').timepicker('enable');
+ });
+ });
+ </script>
+<pre class="code" style="display: none" id="script_tp_disable">
+$('#timepicker_disable_inline').timepicker();
+$('#timepicker_disable').timepicker({showLeadingZero: false });
+$('#btn_disable_tp').click(function() {
+ $('#timepicker_disable_inline').timepicker('disable');
+ $('#timepicker_disable').timepicker('disable');
+});
+$('#btn_enable_tp').click(function() {
+ $('#timepicker_disable_inline').timepicker('enable');
+ $('#timepicker_disable').timepicker('enable');
+});
+</pre>
+ </div>
+
+
</div>
<!------------------------------------------------------------------------------------------------------------->
@@ -536,14 +706,14 @@
</li>
<li>
- <a href="jquery.ui.timepicker.js?v=0.2.4">
+ <a href="jquery.ui.timepicker.js?v=0.2.5">
jquery.ui.timepicker.js
</a>
</li>
<li>
- <a href="jquery-ui-timepicker.css?v=0.2.4">
- jquery-ui-timepicker.css
+ <a href="jquery.ui.timepicker.css?v=0.2.5">
+ jquery.ui.timepicker.css
</a>
</li>
@@ -559,6 +729,10 @@
<h2>Releases :</h2>
<dl>
+ <dt>0.2.5 - September 13, 2011</dt>
+ <dd>Added support for disable and enable. (Suggested by danielrex, github issue #17)</dd>
+ <dd>Added an example for 2 timepicker to behave as a period selector (start time and end time). (Thanks Bill Pellowe)</dd>
+ <dd>Renamed the stylesheet to jquery.ui.timepicker.css to be more consistent with jQuery UI file name convention.</dd>
<dt>0.2.4 - August 5, 2011</dt>
<dd>Fixed the hand cursor in the css file. (Thanks Mike Neumegen)</dd>
@@ -674,7 +848,7 @@
<h2>Download Timepicker</h2>
<p>
- Current version : 0.2.4 - released August 5, 2011
+ Current version : 0.2.5 - released September 13, 2011
</p>
<p>
@@ -682,7 +856,7 @@
</p>
<p>
- <a href="releases/jquery-ui-timepicker-0.2.4.zip">Download from here (.zip)</a>
+ <a href="releases/jquery-ui-timepicker-0.2.5.zip">Download from here (.zip)</a>
</p>
<hr >
@@ -741,7 +915,7 @@
<strong>New! New!</strong> TimePicker is now 100% more social, on GitHub @ <a href="http://github.com/fgelinas/timepicker">http://github.com/fgelinas/timepicker</a>.
</p>
<p>
- Get the release package here : <a href="releases/jquery-ui-timepicker-0.2.4.zip">jquery-ui-timepicker-0.2.4.zip</a>
+ Get the release package here : <a href="releases/jquery-ui-timepicker-0.2.5.zip">jquery-ui-timepicker-0.2.5.zip</a>
</p>
<hr />
View
0  jquery-ui-timepicker.css → jquery.ui.timepicker.css
File renamed without changes
View
101 jquery.ui.timepicker.js
@@ -1,5 +1,5 @@
/*
- * jQuery UI Timepicker 0.2.4
+ * jQuery UI Timepicker 0.2.5
*
* Copyright 2010-2011, Francois Gelinas
* Dual licensed under the MIT or GPL Version 2 licenses.
@@ -9,7 +9,7 @@
*
* Depends:
* jquery.ui.core.js
- *
+ * jquery.ui.position.js (only if position settngs are used)
*
* Change version 0.1.0 - moved the t-rex up here
*
@@ -40,7 +40,7 @@
(function ($, undefined) {
- $.extend($.ui, { timepicker: { version: "0.2.4"} });
+ $.extend($.ui, { timepicker: { version: "0.2.5"} });
var PROP_NAME = 'timepicker';
var tpuuid = new Date().getTime();
@@ -171,9 +171,13 @@
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
if (nodeName == 'input') {
this._connectTimepicker(target, inst);
+ // init inst.hours and inst.minutes from the input value
+ this._setTimeFromField(inst);
} else if (inline) {
this._inlineTimepicker(target, inst);
}
+
+
},
/* Create a new instance object. */
@@ -203,7 +207,6 @@
bind("getData.timepicker", function (event, key) {
return this._get(inst, key);
});
- //this._autoSize(inst);
$.data(target, PROP_NAME, inst);
},
@@ -722,13 +725,63 @@
return html;
},
+
+ /* Enable the date picker to a jQuery selection.
+ @param target element - the target input field or division or span */
+ _enableTimepicker: function(target) {
+ var $target = $(target),
+ target_id = $target.attr('id'),
+ inst = $.data(target, PROP_NAME);
+
+ if (!$target.hasClass(this.markerClassName)) {
+ return;
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ if (nodeName == 'input') {
+ target.disabled = false;
+ inst.trigger.filter('button').
+ each(function() { this.disabled = false; }).end();
+ }
+ else if (nodeName == 'div' || nodeName == 'span') {
+ var inline = $target.children('.' + this._inlineClass);
+ inline.children().removeClass('ui-state-disabled');
+ }
+ this._disabledInputs = $.map(this._disabledInputs,
+ function(value) { return (value == target_id ? null : value); }); // delete entry
+ },
+
+ /* Disable the time picker to a jQuery selection.
+ @param target element - the target input field or division or span */
+ _disableTimepicker: function(target) {
+ var $target = $(target);
+ var inst = $.data(target, PROP_NAME);
+ if (!$target.hasClass(this.markerClassName)) {
+ return;
+ }
+ var nodeName = target.nodeName.toLowerCase();
+ if (nodeName == 'input') {
+ target.disabled = true;
+
+ inst.trigger.filter('button').
+ each(function() { this.disabled = true; }).end();
+
+ }
+ else if (nodeName == 'div' || nodeName == 'span') {
+ var inline = $target.children('.' + this._inlineClass);
+ inline.children().addClass('ui-state-disabled');
+ }
+ this._disabledInputs = $.map(this._disabledInputs,
+ function(value) { return (value == target ? null : value); }); // delete entry
+ this._disabledInputs[this._disabledInputs.length] = $target.attr('id');
+ },
+
/* Is the first field in a jQuery collection disabled as a timepicker?
@param target element - the target input field or division or span
@return boolean - true if disabled, false if enabled */
- _isDisabledTimepicker: function (target) {
- if (!target) { return false; }
+ _isDisabledTimepicker: function (target_id) {
+ if ( ! target_id) { return false; }
for (var i = 0; i < this._disabledInputs.length; i++) {
- if (this._disabledInputs[i] == target) { return true; }
+ if (this._disabledInputs[i] == target_id) { return true; }
}
return false;
},
@@ -863,13 +916,15 @@
var timeVal = inst.lastVal = timeToParse;
+
+
if (timeToParse == '') {
- inst.hours = -1;
- inst.minutes = -1;
+ inst.hours = -1;
+ inst.minutes = -1;
} else {
- var time = this.parseTime(inst, timeVal);
- inst.hours = time.hours;
- inst.minutes = time.minutes;
+ var time = this.parseTime(inst, timeVal);
+ inst.hours = time.hours;
+ inst.minutes = time.minutes;
}
$.timepicker._updateTimepicker(inst);
@@ -949,10 +1004,13 @@
id = $td.attr("data-timepicker-instance-id"),
newHours = $td.attr("data-hour"),
fromDoubleClick = event.data.fromDoubleClick,
- target = $(id),
- inst = this._getInst(target[0]),
+ $target = $(id),
+ inst = this._getInst($target[0]),
showMinutes = (this._get(inst, 'showMinutes') == true);
-
+
+ // don't select if disabled
+ if ( $.timepicker._isDisabledTimepicker($target.attr('id')) ) { return false }
+
$td.parents('.ui-timepicker-hours:first').find('a').removeClass('ui-state-active');
$td.children('a').addClass('ui-state-active');
inst.hours = newHours;
@@ -979,10 +1037,13 @@
id = $td.attr("data-timepicker-instance-id"),
newMinutes = $td.attr("data-minute"),
fromDoubleClick = event.data.fromDoubleClick,
- target = $(id),
- inst = this._getInst(target[0]),
+ $target = $(id),
+ inst = this._getInst($target[0]),
showHours = (this._get(inst, 'showHours') == true);
-
+
+ // don't select if disabled
+ if ( $.timepicker._isDisabledTimepicker($target.attr('id')) ) { return false }
+
$td.parents('.ui-timepicker-minutes:first').find('a').removeClass('ui-state-active');
$td.children('a').addClass('ui-state-active');
@@ -1084,10 +1145,12 @@
},
_getHourTimepicker: function(input) {
var inst = this._getInst(input);
+ if ( inst == undefined) { return -1; }
return inst.hours;
},
_getMinuteTimepicker: function(input) {
var inst= this._getInst(input);
+ if ( inst == undefined) { return -1; }
return inst.minutes;
}
@@ -1135,7 +1198,7 @@
$.timepicker = new Timepicker(); // singleton instance
$.timepicker.initialized = false;
$.timepicker.uuid = new Date().getTime();
- $.timepicker.version = "0.2.4";
+ $.timepicker.version = "0.2.5";
// Workaround for #4055
// Add another global to avoid noConflict issues with inline event handlers
View
4 legacy_1.2.6/index.html
@@ -4,7 +4,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>jQuery UI Time Picker by Francois Gelinas</title>
<link rel="stylesheet" href="../include/jquery-ui-1.8.14.custom.css" type="text/css" />
- <link rel="stylesheet" href="../jquery-ui-timepicker.css?v=0.2.4" type="text/css" />
+ <link rel="stylesheet" href="../jquery.ui.timepicker.css" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript" src="jquery.proxy.fix.js"></script>
@@ -537,7 +537,7 @@
</li>
<li>
- <a href="jquery-ui-timepicker.css?v=0.2.4">
+ <a href="../jquery.ui.timepicker.css?v=0.2.4">
jquery-ui-timepicker.css
</a>
</li>
View
5 releases.txt
@@ -1,3 +1,8 @@
+Release 0.2.5 - September 13, 2011
+Added support for disable and enable. (Suggested by danielrex, github issue #17)
+Added an example for 2 timepicker to behave as a period selector (start time and end time). (Thanks Bill Pellowe)
+Renamed the stylesheet to jquery.ui.timepicker.css to be more consistent with jQuery UI file name convention.
+
Release 0.2.4 - August 5, 2011
Fixed the hand cursor in the css file. (Thanks Mike Neumegen)
Added position option to use with the jquery ui position utility.
View
2  wishlist
@@ -1,2 +1,4 @@
Possibility to use the timepicker for hours only, or minutes only. - Irman , july 2011
-- Coded on August 5, 2011
+
+adding a seconds field in addition to hours and minutes - Joe Porcheddu, september 2011
Please sign in to comment.
Something went wrong with that request. Please try again.