My favorites | Sign in
Project Logo
                
Search
for
Updated Sep 23, 2009 by haineault
Labels: Featured
UiTimepickr  

ui.timepickr.js

Author Copyright (c) 2008 Maxime Haineault (haineault.com)
License MIT License
Website http://haineault.com/media/jquery/ui-timepickr/page/
Rails plugin http://github.com/integrallis/in_place_jquery_timepickr/tree/master

Introduction

jquery.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 examples

Basic usage

HTML

<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 title="theme" type="text/css" href="http://ui.jquery.com/applications/themeroller/css/jquery-ui-base.css.php?ctl=themeroller&amp;=" media="screen" rel="Stylesheet" id="themeCSS" />
  <link rel="stylesheet" media="screen" href="images/jquery.timepickr.css" type="text/css" />
  <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>

Note: The timepickr.css file must be loaded after jquery-ui-base.css

Options

Option Default Description
convention 24 Hour convention (12 or 24)
dropslide {trigger: 'focus'} Dropslide options
format12 "{h:02.d}:{m:02.d} {suffix:s}" 12h format string
format24 "{h:02.d}:{m:02.d}" 24h format string
handle false handle is a DOM element which will open the menu upon click
hours true Show hours picker
minutes true Show minutes picker
seconds false Show seconds picker
prefix 'pm' Time prefix
suffix 'pm' Time suffix
rangeMin '15', '30', '45' Minutes range
rangeSec '15', '30', '45' Seconds range
updateLive true Update input value on each mouseover
val false Initial value
resetOnBlur true Input reset itself on blur when no click happens

TODO

References


Comment by analytic...@allproducts.info, Jan 21, 2009

Awsome!!! One Question: Is there a way to remove the am/pm stuff completely? Doesn't make sense with 24h support...

Comment by haineault, Jan 21, 2009

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.

Comment by analytic...@allproducts.info, Jan 21, 2009

More than good enough for me! If I rename the am/pm, is the limit 2 characters or do the boxes scale?

Comment by bsbodden, Jan 28, 2009

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

Comment by raskchanky, Mar 06, 2009

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?

Comment by haineault, Mar 06, 2009

Is $.ui present ? because as far as I know they didn't remove $.widget from the 1.7 release ..

Comment by raskchanky, Mar 10, 2009

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?

Comment by haineault, Mar 10, 2009

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 ?

Comment by frensolo, Mar 18, 2009

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

Comment by haineault, Mar 19, 2009

@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

Comment by adatta02, Apr 05, 2009

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/

Comment by rok.dominko, Apr 08, 2009

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.

Comment by haineault, Apr 08, 2009

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

Comment by m.willerich, Apr 10, 2009

Which jQuery UI dependencies does the widget have? Just the core?

Comment by haineault, Apr 10, 2009

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

Comment by sayret, Apr 27, 2009

It would be nice to have an onOpen and onClose custom function int the options similar to daterangepicker

Comment by jpbert...@yahoo.com, Apr 29, 2009

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);

Comment by mark.raw...@hotmail.com, Jun 03, 2009

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.

Comment by chris.ta...@gmail.com, Jun 08, 2009

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!

Comment by petr.vytlacil, Jun 09, 2009

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}

Comment by haineault, Jun 09, 2009

@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

Comment by shrinerp, Jun 09, 2009

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?

Comment by hans.nauta, Jun 26, 2009

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

Comment by acooke123, Jul 13, 2009

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!

Comment by cr...@incrediblyuseful.net, Jul 16, 2009

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

Comment by haineault, Jul 16, 2009

@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.

Comment by zion.xtrm, Aug 06, 2009

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.

Comment by haineault, Aug 06, 2009

@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

Comment by tom.fernandez, Aug 06, 2009

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.

Comment by troothmedia, Aug 08, 2009

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

Comment by haineault, Aug 08, 2009

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

Comment by troothmedia, Aug 08, 2009

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

Comment by haineault, Aug 09, 2009

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

$('input').timepickr({
    format12: '{h:d}:{m:02.d} {suffix:s}'
});
Comment by jlbriggs, Aug 18, 2009

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!

Comment by jhblacklock, Aug 29, 2009

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

Comment by haineault, Aug 29, 2009

Thanks for the fix !

Comment by fatalis.erratum, Aug 31, 2009

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

Comment by haineault, Aug 31, 2009

@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.

Comment by fatalis.erratum, Sep 01, 2009

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.

Comment by HyderAlamgir, Sep 06, 2009

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

Comment by fatalis.erratum, Sep 08, 2009

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

Comment by haineault, Sep 08, 2009

@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.

Comment by andy.nagai, Sep 17, 2009

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.

Comment by andy.nagai, Sep 17, 2009

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.

Comment by andy.nagai, Sep 17, 2009

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 });

Comment by andy.nagai, Sep 17, 2009

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

Comment by Al.Webber, Sep 18, 2009

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

Comment by andy.nagai, Sep 22, 2009

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

Comment by Al.Webber, Sep 23, 2009

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

Comment by haineault, Sep 23, 2009

@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.

Comment by andy.nagai, Sep 24, 2009

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.

Comment by haineault, Sep 24, 2009

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

Comment by andy.nagai, Sep 24, 2009

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.

Comment by andy.nagai, Sep 24, 2009

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>

Comment by romalpatel19, Sep 29, 2009

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

Comment by movinvan, Sep 29, 2009

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

Comment by movinvan, Sep 29, 2009

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...

Comment by solmead, Oct 07, 2009

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?

Comment by edaddi, Oct 28, 2009

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?


Sign in to add a comment
Hosted by Google Code