{"id":1009,"date":"2009-07-09T19:07:32","date_gmt":"2009-07-10T01:07:32","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=1009"},"modified":"2015-03-20T14:53:02","modified_gmt":"2015-03-20T20:53:02","slug":"updating-timepickr","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2009\/07\/09\/updating-timepickr\/","title":{"rendered":"Updating <code>timepickr<\/code>"},"content":{"rendered":"<h4>This page is obsolete. Please see <a href=\"http:\/\/github.bililite.com\/flexcal\/timepickr.html\">my github page<\/a>.<\/h4>\r\n<script type=\"text\/javascript\"\r\n  src=\"\/inc\/themeswitcher\/jquery.themeswitcher.js\">\r\n<\/script>\r\n<script src=\"\/inc\/jquery.timepickr.js\"><\/script><script src=\"\/inc\/jquery.hoverIntent.js\"><\/script>\r\n<p><a href=\"\/blog\/2009\/06\/29\/dont-reinvent-the-wheel\/#more-986\">I like<\/a> Maxime Haineault's <a href=\"http:\/\/haineault.com\/media\/jquery\/ui-timepickr\/page\/\">timepickr<\/a>. But I found it was written for jQuery 1.2, and didn't trigger events correctly with the current jQuery. It also had more dependencies than I wanted, to the extent that the minified version is 49k large, and had some CSS quirks in Internet Explorer that I couldn't figure out without dissecting the whole thing. So I dissected it and rebuilt it smaller, updated for jQuery 1.3. I didn't put back a lot of the options that I didn't need, so it's not exactly an improvement. But it works for me.<\/p>\r\n<input \/><script>$('input:last').timepickr()<\/script>\r\n<p>Download <a href=\"\/inc\/jquery.timepickr.js\">the code<\/a>.<\/p>\r\n<p>I also added the ability to use <a href=\"http:\/\/cherne.net\/brian\/resources\/jquery.hoverIntent.html\">hoverIntent<\/a> so you can roll the mouse over the intervening buttons without triggering them:<\/p>\r\n<input \/><script>$('input:last').timepickr({hoverIntent: true})<\/script>\r\n<!--more-->\r\n<h3>Examples<\/h3>\r\n<div id=themeswitcher><\/div>\r\n<script>$('#themeswitcher').themeswitcher({ imgpath: '\/inc\/themeswitcher\/images\/' });<\/script>\r\n<pre><code class=\"language-javascript demo\">\r\n$('.timepickr-example:eq(0)').timepickr();\r\n<\/code><\/pre>\r\n<pre><code class=\"language-markup language-html demo\">\r\n&lt;input class=\"timepickr-example\" \/&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\n$('.timepickr-example:eq(1)').timepickr({\r\n  convention: 24,\r\n  format: '{h}{m} hours',\r\n  hoverIntent: true,\r\n  rangeMin:    ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55']\r\n});\r\n<\/code><\/pre>\r\n<pre><code class=\"language-html demo\">\r\n&lt;input class=\"timepickr-example\" \/&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\n$('.timepickr-example:eq(2)').timepickr({\r\n  trigger: 'nothing',\r\n  handle: $('#clock')\r\n});\r\n<\/code><\/pre>\r\n<pre><code class=\"language-html demo\">\r\n&lt;input class=\"timepickr-example\" \/&gt; &lt;img id=\"clock\" src=\"\/images\/clock.PNG\" \/&gt;\r\n<\/code><\/pre>\r\n<pre><code class=\"language-javascript demo\">\r\n$('.timepickr-example:eq(3)').timepickr({\r\n  select: function(){\r\n    alert('Time is '+this.value);\r\n  }\r\n});\r\n<\/code><\/pre>\r\n<pre><code class=\"language-html demo\">\r\n&lt;input class=\"timepickr-example\" \/&gt;\r\n<\/code><\/pre>\r\n<h2>Options<\/h2>\r\n<pre><code><dl>\r\n<dt>top {Number}<\/dt>\r\n<dd>Pixel offset of the top left button. Default: 6.<\/dd>\r\n<dt>left {Number}<\/dt>\r\n<dd>Pixel offset of the top left button. Default: 0.<\/dd>\r\n<dt>animSpeed {Number|slow|normal|fast}<\/dt>\r\n<dd>Speed to animate showing\/hiding the buttons. Default: 0.<\/dd>\r\n<dt>trigger {String}<\/dt>\r\n<dd>Event to trigger showing the buttons. Default: 'click'.<\/dd>\r\n<dt>convention {12|24}<\/dt>\r\n<dd>Whether to use a 12-hour or 24-hour clock. Default:  12.<\/dd>\r\n<dt>format {String}<\/dt>\r\n<dd>String that determines how to display the time. Uses simple formatting: '{h}' is replaced by the hour;\r\n'{m}' is replaced by the minutes; '{suffix}' is replaced by the suffix (used in the 12-hour clock); '{prefix}' is\r\nreplaced by the prefix (used in the 24-hour clock). Default: '{h}:{m} {suffix}'<\/dd>\r\n<dt>handle {false|String|jQuery object}<\/dt>\r\n<dd>Other element that will trigger showing the buttons when clicked. If handle is not false, then\r\n$(handle).click() shows the buttons. Default: false.<\/dd>\r\n<dt>prefix {Array(String)}<\/dt>\r\n<dd>Strings to use as labels for the 24-hour clock. Displaying all 24 hours is too long to be usable, so we\r\nsplit them into two halves. Default: ['00-11', '12-23'].<\/dd>\r\n<dt>suffix {Array(String)}<\/dt>\r\n<dd>Strings to use as AM\/PM labels for the 12-hour clock. Default: ['am', 'pm'].<\/dd>\r\n<dt>rangeMin {Array(String)}<\/dt>\r\n<dd>Values to use for the minutes list. Default: ['00', '15', '30', '45']. Use strings rather than numbers to make sure they are formatted correctly (12:00, not 12:0).<\/dd>\r\n<dt>resetOnBlur {Boolean}<\/dt>\r\n<dd>True to reset the element to its original value if nothing is clicked; false to keep the value generated\r\nby the mouseover even if not clicked. Default: true.<\/dd>\r\n<dt>val {false|String}<\/dt>\r\n<dd>If not false, value to assign to the element when the buttons are shown. Default: false.<\/dd>\r\n<dt>hoverIntent {Boolean}<\/dt>\r\n<dd>True to use the hoverIntent plugin if available. Note that timepickr does not provide any way to\r\nadjust the hoverIntent paramenters. Default: false.<\/dd>\r\n<dt>select {undefined|function}<\/dt>\r\n<dd>Callback function, called when the time buttons are clicked. Also available as an event\r\n'timepickrselect'<\/dd>\r\n<\/dl><\/code><\/pre>","protected":false},"excerpt":{"rendered":"This page is obsolete. Please see my github page. I like Maxime Haineault's timepickr. But I found it was written for jQuery 1.2, and didn't trigger events correctly with the current jQuery. It also had more dependencies than I wanted, to the extent that the minified version is 49k large, and had some CSS quirks [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1009"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=1009"}],"version-history":[{"count":45,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1009\/revisions"}],"predecessor-version":[{"id":3531,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/1009\/revisions\/3531"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=1009"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=1009"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=1009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}