ui.timepickr.js

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)

$(this.element).val(o);

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.

show: function(e) {

this.showLevel(0); this.redraw();

},

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

Yes an option to allow manual input would be great as I think some users would be annoyed by being made to use a widget altho most would be loving life!

Sorry, I have JQuery UI installed and I just want to add this plugin. I can't work out which files need to be added and which don't. Could someone help please? I can't get it working at all and I'm spending too much time trying (2 hrs so far). There are discrepancies between this wiki and the download.

Thanks

@cr...@incrediblyuseful.net

Could you be more specific ? It's kinda hard to tell you what's wrong if you only say "it doesn't work".

FWI here's how the dependencies works;

jQuery.timepickr.js and jQuery.dropslide.js are the core of the plugin, but you probably want to use the merged version: jQuery.timepickr.js.

Other dependencies required are: jQuery 1.3+ (not sure it still works with 1.2), jQuery UI 1.7+ (not sure it still works with 1.6) and jQuery.utils (provided with the timepickr).

Be aware that there is a conflict with the jQuery.validation.js plugin, more informations about this conflict can be found here: http://code.google.com/p/jquery-utils/issues/detail?id=15&q=validation

I plan to eventually do a complete rewrite with less dependency, but I'm quite busy so don't hold your breath.

Meanwhile you might be interested in a fork of my project made by Danny Wachsstock;

http://bililite.com/blog/2009/07/09/updating-timepickr/

He removed much of the dependencies.

I got a problem, when i combine the the plugin with jquery.validation appears than the timepicker is broken, i got NaN:NaN for all times.

@zion.xtrm

Yes I know, for more infos refer to this issue;

http://code.google.com/p/jquery-utils/issues/detail?id=21&can=1

Fantastic plugin! Thank you for sharing.

Two issues that I ran into:

1) 12 hour format was showing as "4:00 {suffix}"... replaced {suffix:s} with {z:s} and now it works beautifully. 2) The form element is initially hidden, so on initialization, the widget is given css left: -4 (Firefox 3.5). I added a piece of code in my page that repositions the widget when the form is displayed. Not sure what a proper solution would be, but just wanted to let you know about it.

Thanks again.

Hi,

Great plugin. I have one question - I am using the 12 hour format which is showing 07:45 pm, for example. Is it possible to remove the 0 in front, so only show 7:45 pm? Ive tried but cant seem to get it working. any help would be greatly appreciated

Thanks

R

Yes, simply use the format12 option, which by default is "{h:02.d}:{m:02.d} {suffix:s}".

The time picker use an implementation of the Python 3K string formatting, so if you want to remove the leading zero simply change provide the format12 option with this string: "{h:d}:{m:02.d} {suffix:s}"

For more info about string formating please refer to this page; http://code.google.com/p/jquery-utils/wiki/StringFormat#format

Thanks for that. Do I need to change to {h:d}:{m:02.d} {suffix:s} on both jquery.timepickr.min.js and ui.timepickr.min.js

Rob

Neither of them, you just have to pass it on as option;

$('input').timepickr({
    format12: '{h:d}:{m:02.d} {suffix:s}'
});

Lovely plugin - thank you.

Can anyone tell me how I can check the value that was selected once it has been selected by the user?

help greatly appreciated!

I was running into some issues with the suffix value in the 12h convention and ran across what I think is a bug as the value is showing up (even on the demo) as XX:XX {suffix}.

line 1426 is:

Time.prototype.getTime = function(){ return $.format(this.f, {h: this.h, m: this.m, z: this.z}); };

Which doesn't seem to be the correct string format initialized. Perhaps it should be:

Time.prototype.getTime = function(){ return $.format(this.f, {h: this.h, m: this.m, suffix: this.z}); };

Not terribly sure, but the change works for me.

Best,

Jackson

Thanks for the fix !

I can't fathom what was the idea behind preventing manual input. This is plainly unusable.

@fatalis.erratum;

This is a bug, the plugin shouldn't prevent manual input. Not sure when this bug was introduced, the plugin has been freshly refactored, but thanks for pointing out.

This will be fixed.

Nice to hear that. It would also be useful if you included a setup for selecting ranges. I'm imagining it as there being two inputs: A and B, where B can't be less than A.

Awesome plugin but it's too big for simply a timepickr, requiring that 100KB jquery ui file. Any way to reduce its file size?

So, when will it be fixed? A week has passed already.

@fatalis.erratum:

As soon as I have some spare time. I'm very busy on other more important projects and at work. I invest time on this project every time I have some free time, but this project isn't paying my rent so it's not exactly on top of my priority list.

Meanwhile I always accept patches.

Regards.

Is there anyway to activate the timepicker when clicking in a textbox instead of hovering over it. I have a entry form with multiple time entry fields next to each other. If a user just happens to go over both controls then the display is all messed up. I think the default should be to activate on click.

This default date format {h:02.d}:{m:02.d} {suffix:s} displays as '09:23 {suffix}'

Im using firefox 3.0. Even on your demo page it shows {suffix} where am or pm should be. As stated above the solution is to use {h:02.d}:{m:02.d} {z:s} to display the am or pm.

Do you display all available options in your options above? I dont' think so.

ok I figured out how to make it activate on clicking inside a textbox. you have to use the undocumented trigger: 'click' option when initializing timepicker. I also made mine not always change value everytime hover over different number and also turned off the entering '0:00 am' value when clicking outside of timepicker. also removed the leading 0 in hour. And also actually made it display am or pm instead of the default {suffix}. This latter one is a bug.

This is my initialize code:

$('#txtbox').timepickr({

updateLive:false,

format12: "{h:d}:{m:02.d} {z:s}", trigger: "click", resetOnBlur: false, convention: 12 });

my mistake. you have to take out that resetOnBlur: false parameter in above code otherwise it will never change the value

Hi there,

Further to andy.nagai above, I find some real examples help me immensely, I wonder if someone could have a look at this example for me and see where I'm going wrong, using andy's suggested settings, I want the date pickr to not be displayed on Page load, and only appear when the relevant text box is clicked.

http://www.spookyvw.org.uk/tests/timepickr/timepickr.htm

Any help appreciated, and I'll add a link to the fixed version for reference if it helps anyone out.

Al

Al,

you should wrap the timepicker initialize code with <pre> $(document).ready(function(){ $('#timestart').timepickr({ format12: '{z:s} {h:d}:{m:02.d}', trigger: 'click', convention: 24 }); }); </pre> This will wait until page is loaded before initialize timepicker. am or pm will not show in 24hr convention

Andy,

Thanks for the tip, tried this and it still didn't sort out my issue, investigated a bit further and found that loading the ui.timepickr.css file before the jQueryUI.css was causing the problem, swapped the lines around and its all working now. I'm a clutz!

So here is a nice clean simple example for you all to laugh at :-), seriously though, I hope it helps someone to uses this cool plugin

http://www.spookyvw.org.uk/tests/timepickr/timepickr.htm

Al

@Al.Webber

Thanks for going to the bottom of the issue, sorry it came from my bogus example!

I've fixed corrected the example and added note.

Thanks again.

haineault,

how would i let users enter time manually? they are forced to accept 15 min increments. i can validate the formatting through javascript. Then your plugin will be almost perfect.

This is a reported bug, I just don't have the time to fix it right now .. sorry :/

also, when user deletes time manually it should stay deleted. Why do you enter 0:00 am when they hover and dont click anything? Harder to validate this.

this is reply to HyderAlamgir???

I dont use the giant jquery ui js file. I just use the main jquery 1.3.2 file and load a theme ui css file. It works. Im using timepicker 7.0 alpha. The main theme css needs to come before the timepicker css in my case. timepicker uses whatever theme your using. Very nice feature. This is in my header:

<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<link type="text/css" href="ui.timepickr.css" rel="stylesheet" />

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="jquery.timepickr.js"></script>

i want timepicker above the input time picker... please give solution for to display above input

Hi, this is a great plugin. I have a question regarding the initial value. What value type/format is expected for the initial value of the timepickr?

The input already has a value '09:00 AM' (for example) before initializing the timepickr. After I create a timepickr on that element, I focus on the field and then tab out or lose focus on the element and the field value changes to "NaN:NaN gibberish code from my page".

What is the correct format for setting the initial value of the timepickr? Thanks

To elaborate:

$startHourField.timepickr({updateLive:false, format12: "{h:02.d}:{m:02.d} {z:s}", suffix: 'PM'?, val: thisSHour, trigger: "click", convention: 12 });

Where thisSHour has been many formats: 24 hour time (17:00), 12 hour (05:00 PM), etc and none of it will trigger the timepickr to accept the existing value as the default value when activated...

I am trying to have the initial val be set based on what is in the text (And I have 4+ <input type=text> on my page),

I tried:

$('.timepicker').timepickr({
		                    format12: '{h:d}:{m:02.d} {z:s}',
		                    trigger: 'click',
		                    convention: 12,
		                    resetOnBlur: true,
		                    updateLive: true,
		                    val: $(this).attr('value'),
		                    rangeMin: $.range(0, 59)
		            });

But it doesn't seem to work, they always default to the empty, any help on how I could do this?

Nice idea, but whats with the error i see on every demo I look at:

http://haineault.com/media/jquery/ui-timepickr/page/ http://www.spookyvw.org.uk/tests/timepickr/timepickr.htm

Each page listed above firebug reports: cannot access optimized closure ui.timepickr.js Line 92

Any ideas what that is?