Comments on: Updating timepickr http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/ Thoughts on web design and programming from a very occasional volunteer webmaster Thu, 10 May 2012 10:36:28 +0000 hourly 1 http://wordpress.org/?v=3.3.2 By: Danny http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-15851 Danny Tue, 21 Feb 2012 15:34:25 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-15851 @John Doe: use <code>resetOnBlur: false</code> Danny @John Doe:
use resetOnBlur: false
Danny

]]> By: John Doe http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-15848 John Doe Tue, 21 Feb 2012 14:56:59 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-15848 Oh joy, it works now! =^-^= Thank you very much. Sorry for the dumb mistakes I made but after some hours I went just code-blind. ;) Now is there a way to have the user input the time by keyboard without interfeing with the timepicker? Oh joy, it works now! =^-^=
Thank you very much. Sorry for the dumb mistakes I made but after some hours I went just code-blind. ;)
Now is there a way to have the user input the time by keyboard without interfeing with the timepicker?

]]> By: Danny http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-15791 Danny Mon, 20 Feb 2012 18:25:53 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-15791 @John Doe: You've got a whole bunch of typos/errors in your code: <ol> <li>script tags are not closed. They have to be <code class="language-html"><script src="whatever"></script></li> <li>Use the most up-to-date versions of the library, jQuery 1.7 and jQuery UI 1.8 (the css doesn't matter so much; I'm still using the 1.7 Smoothness theme)</li> <li>The <code>:eq()</code> selector starts from zero, so <code>:eq(1)</code> won't select anything</li> </ul> Try the following: <pre><code class="language-html"><html> <head> <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.7.1.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script> <script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script> </head> <body> <input class="timepickr-example"/> <script type="text/javascript"> $('.timepickr-example:eq(0)').timepickr({ convention: 24, format: '{h}:{m}', hoverIntent: false }); </script> </body> </html></code></pre> @John Doe:
You’ve got a whole bunch of typos/errors in your code:

  1. script tags are not closed. They have to be <script src="whatever"></script>
  2. Use the most up-to-date versions of the library, jQuery 1.7 and jQuery UI 1.8 (the css doesn't matter so much; I'm still using the 1.7 Smoothness theme)
  3. The :eq() selector starts from zero, so :eq(1) won't select anything

    4. Try the following:

    <html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.js"></script>

<script src="http://bililite.nfshost.com/inc/jquery.timepickr.js"></script>
</head>

<body>
<input class="timepickr-example"/>

<script type="text/javascript">
$('.timepickr-example:eq(0)').timepickr({
convention: 24,
format: '{h}:{m}',
hoverIntent: false
});
</script>
</body>
</html>
]]> By: John Doe http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-15786 John Doe Mon, 20 Feb 2012 16:02:44 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-15786 I just can’t get this to work. Not after one full hour of twiddling and hacking. PLEASE have a ultra minimalistic example somewhere, please please please. This doesn’t work and I can not figure out why: [html] [head] [link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /] [script src="http://code.jquery.com/jquery-1.4.2.min.js"[/script] [script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"[/script] [script src="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.widget.js"[/script] [script src="http://bililite.nfshost.com/jquery.timepickr.js" /] [/head] [body] [input class="timepickr-example"/] [script type="text/javascript"] $('.timepickr-example:eq(1)').timepickr({ convention: 24, format: '{h}:{m}', hoverIntent: false }); [/script] [/body] [/html] I just can’t get this to work. Not after one full hour of twiddling and hacking.
PLEASE have a ultra minimalistic example somewhere, please please please.

This doesn’t work and I can not figure out why:

[html]
[head]
[link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/smoothness/jquery-ui.css" /]

[script src="http://code.jquery.com/jquery-1.4.2.min.js"[/script]
[script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"[/script]
[script src="http://jquery-ui.googlecode.com/svn/trunk/ui/jquery.ui.widget.js"[/script]

[script src="http://bililite.nfshost.com/jquery.timepickr.js" /]
[/head]

[body]
[input class="timepickr-example"/]

[script type="text/javascript"]
$(‘.timepickr-example:eq(1)’).timepickr({
convention: 24,
format: ‘{h}:{m}’,
hoverIntent: false
});
[/script]
[/body]
[/html]

]]> By: Danny http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-4896 Danny Fri, 01 Jul 2011 12:03:52 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-4896 @Lucas: That looks right. Can you put up a page with your code and I'll try to look at it? Try it without the <code>trigger</code> option as well. --Danny @Lucas:
That looks right. Can you put up a page with your code and I’ll try to look at it? Try it without the trigger option as well.
–Danny

]]> By: Lucas http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-4828 Lucas Tue, 28 Jun 2011 11:31:03 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-4828 This time picker functionality seems to be exactly what I need. However, it must be because I'm new to jQuery but I cannot get this to work. It's so frustrating. I was using the old timepickr but I really want to use this one. Here is my code: $(function(){ $('#timestart').timepickr({ trigger: 'focus' }); }); Am I referencing the field in the wrong manner? That's how I call timepickr from the original site and it works. It doesn't seem to work in this case. I am calling jquery-ui and everything. Thanks in advance for any tips and/or advice. This time picker functionality seems to be exactly what I need.
However, it must be because I’m new to jQuery but I cannot get this to work. It’s so frustrating. I was using the old timepickr but I really want to use this one.
Here is my code:

$(function(){
$(‘#timestart’).timepickr({
trigger: ‘focus’
});
});

Am I referencing the field in the wrong manner? That’s how I call timepickr from the original site and it works. It doesn’t seem to work in this case. I am calling jquery-ui and everything.
Thanks in advance for any tips and/or advice.

]]> By: Shane Tomlinson http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-1988 Shane Tomlinson Fri, 05 Nov 2010 11:33:44 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-1988 Hey Danny, great work here getting this updated for the newest jQuery/UI. I have a patch to your redo I'd like to submit back to you, it fixes some problems binding to blur to close the timepicker if trigger is set to something other than "click", fixes a problem if the field does not have a value when the timepicker is instantiated but has a value when it is first shown, and finally fixes an issue I was seeing with the minutes row being shifted left in 24 hour mode whenever looking at hours 12-23. Could you get back to me with an address I can mail this to? Thanks, Shane Hey Danny, great work here getting this updated for the newest jQuery/UI. I have a patch to your redo I’d like to submit back to you, it fixes some problems binding to blur to close the timepicker if trigger is set to something other than “click”, fixes a problem if the field does not have a value when the timepicker is instantiated but has a value when it is first shown, and finally fixes an issue I was seeing with the minutes row being shifted left in 24 hour mode whenever looking at hours 12-23. Could you get back to me with an address I can mail this to?

Thanks,
Shane

]]> By: Danny http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-1937 Danny Sun, 31 Oct 2010 03:29:09 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-1937 @Haso Keric: Ah, got it. They created a real base class called $.Widget, so you had to change $.widget.prototype to $.Widget.prototype. I updated my code; thanks! I kept the CSS stuff in the .js file so I could keep it all in one file, though your approach is of course the correct one. --Danny @Haso Keric:
Ah, got it. They created a real base class called $.Widget, so you had to change $.widget.prototype to $.Widget.prototype.
I updated my code; thanks!

I kept the CSS stuff in the .js file so I could keep it all in one file, though your approach is of course the correct one.
–Danny

]]> By: Haso Keric http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-1928 Haso Keric Fri, 29 Oct 2010 15:08:43 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-1928 It was minor changes the widget failed to destroy itself and cause a js error because apparently in 1.4.3 they changed the way this should be done... But ill keep improving it of course.. i also moved CSS stuff from .js to .css keep an eye on it.. and contribute :) It was minor changes the widget failed to destroy itself and cause a js error because apparently in 1.4.3 they changed the way this should be done… But ill keep improving it of course.. i also moved CSS stuff from .js to .css

keep an eye on it.. and contribute :)

]]> By: Danny http://bililite.nfshost.com/blog/2009/07/09/updating-timepickr/comment-page-1/#comment-1907 Danny Tue, 26 Oct 2010 03:29:55 +0000 http://bililite.nfshost.com/blog/?p=1009#comment-1907 @Haso: I assume you updated the code for jQuery UI 1.8.5, though I can't see any differences just glancing through the code. What changes did you make? --Danny @Haso:
I assume you updated the code for jQuery UI 1.8.5, though I can’t see any differences just glancing through the code. What changes did you make?
–Danny

]]>