Skip to content

Commit

Permalink
Added option to set scroll position to local time. Fixes #6.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonthornton
jonthornton committed Dec 28, 2011
1 parent 280fcaa commit 643d5ce
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 24 deletions.
114 changes: 97 additions & 17 deletions index.html
View file
@@ -1,21 +1,23 @@

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>


<title>Timepicker for jQuery</title> <title>Timepicker for jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.timepicker.js"></script> <script type="text/javascript" src="jquery.timepicker.min.js"></script>


<link rel="stylesheet" type="text/css" href="jquery.timepicker.css" /> <link rel="stylesheet" type="text/css" href="jquery.timepicker.css" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" /> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css" />


<style type="text/css"> <style type="text/css">
body { background: #fff; color: #333; font-family: helvetica, arial, sans-serif; margin: 30px; font-size: 15px; } body { background: #fff; color: #333; font-family: helvetica, arial, sans-serif; margin: 30px; font-size: 15px; line-height: 145%; }
h1, h2, h3 { color: #000; } h1, h2, h3 { color: #000; }
h2, h3 { margin: 30px 0 10px 0; } h2, h3 { margin: 30px 0 10px 0; }
h2:first-child, h3:first-child { margin-top: 0; }
p, .p { margin: 10px 0 20px 0; } p, .p { margin: 10px 0 20px 0; }
input.time, input.date { font-size: 13px; } input.time, input.date { font-size: 13px; }
input.time { width: 80px; } input.time { width: 80px; }
Expand All @@ -24,19 +26,21 @@
h1 a { color: #000; } h1 a { color: #000; }
image { border: 0; } image { border: 0; }


.example { border: 1px solid #ddd; background: #f4f4f4; padding: 10px; margin: 10px 0 20px 0; } .example { border: 1px solid #ddd; background: #f4f4f4; padding: 10px; margin: 10px 0 30px 0; }
.example h3 { margin: 0 0 10px 0; } .example h3 { margin: 0 0 10px 0; }
.example p { margin: 20px 0 0 0; } .example p { margin: 20px 0 0 0; }


.code { font-family: Consolas, Monaco, "Courier New", Courier; background: #fff; color: #888; }

#container { margin: 0 auto; width: 700px; } #container { margin: 0 auto; width: 700px; }
h1 { font-size: 3.8em; color: #000; margin-bottom: 3px; } h1 { font-size: 3.8em; color: #000; margin: 0 0 3px 0; }
h1 .small { font-size: 0.4em; } h1 .small { font-size: 0.4em; }
h1 a { text-decoration: none } h1 a { text-decoration: none }
h2 { font-size: 1.5em; color: #000; } h2 { font-size: 1.5em; color: #000; }
.byline { font-size: 1.5em; font-weight: bold; margin: 20px 0 0 0; } .byline { font-size: 1.5em; font-weight: bold; margin: 20px 0 0 0; }
.byline a { text-decoration: none; } .byline a { text-decoration: none; }
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;} .description { font-size: 1.2em; margin: 20px 0 40px 0; font-style: italic;}
.download { float: right; } #download { float: right; padding-top: 20px; }
pre { background: #000; color: #fff; padding: 15px;} pre { background: #000; color: #fff; padding: 15px;}
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa} hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
.footer { text-align:center; padding-top:30px; font-style: italic; } .footer { text-align:center; padding-top:30px; font-style: italic; }
Expand All @@ -47,25 +51,21 @@
</head> </head>


<body> <body>
<a href="https://github.com/jonthornton/jquery-timepicker"><img style="position: absolute; top: 0; right: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>


<div id="container"> <div id="container">


<div class="download"> <div id="download">
<a href="https://github.com/jonthornton/jquery.timepicker/zipball/master"> <a href="https://github.com/jonthornton/jquery-timepicker">View source on GitHub</a><br /> or download below
<img width="90" src="https://github.com/images/modules/download/zip.png" alt="download zip" /></a>
<a href="https://github.com/jonthornton/jquery.timepicker/tarball/master">
<img width="90" src="https://github.com/images/modules/download/tar.png" alt="download tar" /></a>
</div> </div>


<h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker</a></h1> <h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker</a></h1>
<div class="byline">by <a href="https://github.com/jonthornton">jonthornton</a></div>

<div class="description"> <div class="description">
A jQuery timepicker plugin inspired by Google Calendar. A jQuery timepicker plugin inspired by Google Calendar.
</div> </div>






<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
Expand All @@ -75,8 +75,32 @@ <h1><a href="https://github.com/jonthornton/jquery-timepicker">jquery.timepicker


<h3>Basic Example</h3> <h3>Basic Example</h3>
<p><input id="basicExample" type="text" class="time" /></p> <p><input id="basicExample" type="text" class="time" /></p>

<pre class="code">$('#basicExample').timepicker();</pre>
</div> </div>






<div class="example">
<script>
$(function() {
$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });
});
</script>

<h3>Scroll Default Example</h3>
<p>Set the scroll position to local time if no value selected.</p>
<p><input id="defaultValueExample" type="text" class="time" /></p>

<pre class="code">$('#defaultValueExample').timepicker({ 'scrollDefaultNow': true });</pre>
</div>





<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
Expand All @@ -85,9 +109,18 @@ <h3>Basic Example</h3>
</script> </script>


<h3>Duration Example</h3> <h3>Duration Example</h3>
<p>Set a starting time and see duration from that starting time.</p>
<p><input id="durationExample" type="text" class="time" /></p> <p><input id="durationExample" type="text" class="time" /></p>

<pre class="code">$('#durationExample').timepicker({
'minTime': '2:00pm',
'showDuration': true
});</pre>
</div> </div>





<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
Expand All @@ -100,12 +133,23 @@ <h3>Duration Example</h3>
</script> </script>


<h3>onSelect Example</h3> <h3>onSelect Example</h3>
<p>Trigger an event after selecting a value. Fires before the input onchange event.</p>
<p> <p>
<input id="onselectExample" type="text" class="time" /> <input id="onselectExample" type="text" class="time" />
<span id="onselectTarget" style="margin-left: 30px;"></span> <span id="onselectTarget" style="margin-left: 30px;"></span>
</p> </p>

<pre class="code">$('#onselectExample').timepicker({
'onSelect': function() {
$('#onselectTarget').text($(this).val());
}
});</pre>
</div> </div>






<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
Expand All @@ -117,20 +161,35 @@ <h3>onSelect Example</h3>
<h3>timeFormat Example</h3> <h3>timeFormat Example</h3>
<p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p> <p>timepicker.jquery uses the time portion of <a href="http://php.net/manual/en/function.date.php">PHP's date formatting commands</a>.</p>
<p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p> <p><input id="timeformatExample1" type="text" class="time" /> <input id="timeformatExample2" type="text" class="time" /></p>

<pre class="code">$('#timeformatExample1').timepicker({ 'timeFormat': 'H:i:s' });
$('#timeformatExample2').timepicker({ 'timeFormat': 'h:i A' });</pre>
</div> </div>






<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
$('#stepExample1').timepicker({ 'step': 15 }); $('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({ 'step': 60, 'className': 'foobar' }); $('#stepExample2').timepicker({ 'step': 60 });
}); });
</script> </script>


<h3>Step Example</h3> <h3>Step Example</h3>
<p>Generate drop-down options with varying levels of precision.</p>
<p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p> <p><input id="stepExample1" type="text" class="time" /> <input id="stepExample2" type="text" class="time" /></p>

<pre class="code">$('#stepExample1').timepicker({ 'step': 15 });
$('#stepExample2').timepicker({ 'step': 60 });</pre>
</div> </div>






<div class="example"> <div class="example">
<script> <script>
$(function() { $(function() {
Expand All @@ -143,6 +202,7 @@ <h3>Step Example</h3>
</script> </script>


<h3>Select Example</h3> <h3>Select Example</h3>
<p>Use jquery-timepicker with &lt;select&gt; elements too.</p>
<p><select id="selectExample" class="time"> <p><select id="selectExample" class="time">
<option value="12:00am">12:00am</option> <option value="12:00am">12:00am</option>
<option value="1:00am">1:00am</option> <option value="1:00am">1:00am</option>
Expand Down Expand Up @@ -171,6 +231,10 @@ <h3>Select Example</h3>
</select> <button id="selectButton">Convert to timepicker</button></p> </select> <button id="selectButton">Convert to timepicker</button></p>
</div> </div>






<div class="example"> <div class="example">
<script src="datepair.js"></script> <script src="datepair.js"></script>
<h3>Datepair Example</h3> <h3>Datepair Example</h3>
Expand All @@ -181,10 +245,26 @@ <h3>Datepair Example</h3>
<input type="text" class="time end" /> <input type="text" class="time end" />
<input type="text" class="date end" /> <input type="text" class="date end" />
</p> </p>

<p>Datepair source available <a href="http://jonthornton.github.com/jquery-timepicker/datepair.js">here</a>.</p>
</div>





<div class="example" style="background: #ffd;">
<h2>Want to get paid to work on stuff like this?</h2>

<p>Shameless plug: <a href="http://www.parkwhiz.com">ParkWhiz</a> is looking for talented
<a href="http://www.parkwhiz.com/about/jobs/designer/">designers</a>
and <a href="http://www.parkwhiz.com/about/jobs/developer/">developers</a> to help us drag the parking industry
out of the Stone Age. Visit ParkWhiz's <a href="http://www.parkwhiz.com/about/jobs/">jobs page</a> or email
<a href="mailto:jobs@parkwhiz.com">jobs@parkwhiz.com</a> and introduce yourself!</p>
</div> </div>


<h2>Contact</h2> <h2>Contact</h2>
<p><a href="http://tumblr.jonthornton.com">Jon Thornton</a> ([lastname].[firstname]@gmail.com)</p> <p><a href="http://jonthornton.com">Jon Thornton</a> &mdash; [lastname].[firstname]@gmail.com</p>




<h2>Download</h2> <h2>Download</h2>
Expand All @@ -200,7 +280,7 @@ <h2>Download</h2>
</div> </div>


<div class="footer"> <div class="footer">
&copy; 2011 Jon Thornton &copy; 2011 <a href="http://jonthornton.com">Jon Thornton</a>
</div> </div>


</div> </div>
Expand Down
40 changes: 34 additions & 6 deletions jquery.timepicker.js
View file
Expand Up @@ -15,6 +15,7 @@ requires jQuery 1.6+
step: 30, step: 30,
showDuration: false, showDuration: false,
timeFormat: 'g:ia', timeFormat: 'g:ia',
scrollDefaultNow: false,
onSelect: function() { } onSelect: function() { }
}; };


Expand Down Expand Up @@ -109,9 +110,16 @@ requires jQuery 1.6+


list.show(); list.show();


var settings = self.data("settings");
// position scrolling // position scrolling
var selected = list.find('.ui-timepicker-selected'); var selected = list.find('.ui-timepicker-selected');
if (selected.length) {
if (!selected.length && settings.scrollDefaultNow) {
var nowTime = _time2int(new Date());
selected = _findRow(self, list, nowTime);
}

if (selected && selected.length) {
var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight(); var topOffset = list.scrollTop() + selected.position().top - selected.outerHeight();
list.scrollTop(topOffset); list.scrollTop(topOffset);
} }
Expand Down Expand Up @@ -225,19 +233,34 @@ requires jQuery 1.6+
}); });
}; };


function _setSelected(self, list) function _findRow(self, list, value)
{ {
var timeValue = _time2int(self.val()); if (!value && value !== 0) {
return false;
}

var settings = self.data("settings");
var out = false;


// loop through the menu items and apply selected class if we find a match // loop through the menu items
list.find('li').each(function(i, obj) { list.find('li').each(function(i, obj) {
var jObj = $(obj); var jObj = $(obj);


if (jObj.data('time') === timeValue) { if (Math.abs(jObj.data('time') - value) < settings.step*60) {
jObj.addClass('ui-timepicker-selected'); out = jObj;
return false; return false;
} }
}); });

return out;
}

function _setSelected(self, list)
{
var timeValue = _time2int(self.val());

var selected = _findRow(self, list, timeValue);
if (selected) selected.addClass('ui-timepicker-selected')
} }


function _keyhandler(e) function _keyhandler(e)
Expand Down Expand Up @@ -342,6 +365,7 @@ requires jQuery 1.6+
} }


settings.onSelect.call(self); settings.onSelect.call(self);
self.trigger('change');
}; };


function _int2duration(seconds) function _int2duration(seconds)
Expand Down Expand Up @@ -423,6 +447,10 @@ requires jQuery 1.6+
if (timeString == '') return null; if (timeString == '') return null;
if (timeString+0 == timeString) return timeString; if (timeString+0 == timeString) return timeString;


if (typeof(timeString) == 'object') {
timeString = timeString.getHours()+':'+timeString.getMinutes();
}

var d = new Date(0); var d = new Date(0);
var time = timeString.toLowerCase().match(/(\d+)(?::(\d\d))?\s*([pa]?)/); var time = timeString.toLowerCase().match(/(\d+)(?::(\d\d))?\s*([pa]?)/);


Expand Down

0 comments on commit 643d5ce

Please sign in to comment.