My favorites | Sign in
Project Logo
                
Search
for
Updated Jan 29, 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 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&amp;=" 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

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 ['am', 'pm'] Time prefix
suffix ['am', 'pm'] Time suffix
rangeMin ['00', '15', '30', '45'] Minutes range
rangeSec ['00', '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


Sign in to add a comment
Hosted by Google Code