|
UiTimepickr
ui.timepickr.js
Introductionjquery.timepickr was created in a attempt to make the process of inputing time in a form as easy an natural as posssible. New: More infos available in Development notes Usage examplesBasic usageHTML<input id="test" type="text" value=""> JavaScript
$(function(){
$('#test').timepickr();
});
Complete example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" media="screen" href="images/jquery.timepickr.css" type="text/css" />
<link title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&=" media="screen" rel="Stylesheet" id="themeCSS" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
<script type="text/javascript">
$(function(){
$('#timestart').timepickr();
});
</script>
</head>
<body>
<input id="timestart" type="text" value="09:00" />
</body>
</html>
Options
TODO
References |
Sign in to add a comment
Awsome!!! One Question: Is there a way to remove the am/pm stuff completely? Doesn't make sense with 24h support...
You cannot remove the first row and show the 24 hours all at once .. it makes the picker unusable. However you can rename am/pm to your will or even puts icons.
It's probably not the best way to resolve this issue, but it's the most usable I've found yet.
More than good enough for me! If I rename the am/pm, is the limit 2 characters or do the boxes scale?
Maxime, I've turned your widget into a Rails plugin. http://github.com/integrallis/in_place_jquery_timepickr/tree/master Please check the license notice to see if everything is up to your satisfaction. Thanks for a wonderful widget.
Brian
From what I can tell, this is incompatible with the latest jquery UI release 1.7. I get an error about $.widget not being a function. Anyone else having similar problems?
Is $.ui present ? because as far as I know they didn't remove $.widget from the 1.7 release ..
Hmm. I also get an error about $.ui not being a function. The odd part is, I'm using the jquery calendar widget on this same page for a date field, and that works perfectly. I went to http://jqueryui.com/download and built a custom download using UI Core and the Datepicker widget. If I open up the jquery ui source file I have and search for $.widget I don't get any results. I feel like I'm missing something obvious here. Any suggestions?
If $.widget isn't present in your jQuery ui file there is a problem .. because it should:
http://code.google.com/p/jquery-ui/source/browse/trunk/ui/ui.core.js#219
Are you sure you load the timepickr after jquery ui ?
Hi, great plugin, very neat and useful. Just a little question: there's any way to limit the selectable hours? Let's say, from 11AM to 15PM only. Thanks
@frensolo
Currently hours aren't specifiable, however you can edit the source file and specify the range you want.
At line #175 there is $.range(0, 24), simply change it for $.range(11,16) to have a range from 11AM to 15PM. I'm not sure how well the timepickr will handle it, but it might works.
http://code.google.com/p/jquery-utils/source/browse/trunk/standalone/ui-timepickr/src/ui.timepickr.js#175
Hey great plugin - it's really neat.
We wrote a Symfony forms widget for it http://shout.setfive.com/2009/04/06/sfwidgetjquerytimepickr-symfony-timepickr-widget/
I get the error: $("#timestart").timepickr is not a function.
I am using jQuery UI 1.7 with all the options selected at the UI download page and jQuery v1.3.1.
In the head section I load the jQuery first, then jQuery UI, then timepicker. Datepicker works perfectly on current configuration.
Any help would be appreciated.
Please refer to this ticket to see if it applies to your situation, there is probably some files missing;
http://code.google.com/p/jquery-utils/issues/detail?id=21&can=1
Which jQuery UI dependencies does the widget have? Just the core?
Yes. You can have a good idea of the dependencies by looking in the build.yml file.
For more infos on the build system you can refer to this page;
http://code.google.com/p/jquery-utils/wiki/BuildSystem
It would be nice to have an onOpen and onClose custom function int the options similar to daterangepicker
There's a bit of a problem with the timepickr when the user either double clicks in the text area or does a select + home (it skrews up the time). You can fix this by altering the update method to contain a check like the following at line 111:
if (o.indexOf('NaN', 0) < 0)
Hello,
First off, thanks for this - it's fantastic.
I had a little problem with it where the very first time the time picker loaded, the left offset would be incorrect. After you chose a time, and then went back to change the time to something else.. the left offset was correct.
I'm still not quite sure why this is, I can only assume that the left offset is not being set correctly the first time it's opened.. because I know that the redraw function correctly sets the left offset.
Anyway, I ended up digging into the code a little bit and i changed the show function to this, which seems to have fixed the problem.
I'm using IE 7, however I don't believe this is a browser issue :P
Thanks again.
I've added an additional row across the top of the time selector to allow for selecting a full date + timestamp (Today, Tomorrow, Not Applicable) on the top row). This works as it should, but I'm having some issues not showing the subsequent hours + minutes + am/pm if they select 'Not applicable'. Any suggestions as to the best place to put in a bit of logic to say 'if Not Applicable is selected, don't show the child rows? and what should be done in order not to show the child elements? Thanks!
Hi timepickr has problem when you use jquery validation plugin: http://jquery.bassistance.de/validate/demo/
When i link this libarys, timepicker setting in input: {h:02.d}:{m:02.d} and show time {label:s}
@petr.vytlacil
Both me and the author of the validation plugin are aware of this bug and it's on its way to being fixed.
The short story is that the validation plugin use a $.format method that conflicts with my string formating plugin. The author as agreed to scope his method to resolve the conflict. It will be fixed in the next releases of jQuery Validation.
For the long story and workarounds refer to the comments in this bug report please:
http://code.google.com/p/jquery-utils/issues/detail?id=15
regards
The value is not setting on my input control.
I have gone through the demo and matched code line by line.
This is how I am creating the element.
$("#time").timepickr({convention:12});
Any thoughts on why the <input> tag wouldn't update?
Any idea how to change the code so custom values edited manually in the input field - that are outside the standard range (for example 14:11) - also are accepted & don't get removed once clicking elsewhere?
great plugin btw