Trent Richardson
A new timepicker is now available thanks to Jeremy and other commenters. I don’t have all the suggested/submitted changes yet. Jeremy submitted quite a few changes so I thought I would take a couple smaller steps in integrating all the other changes. I know there are still a few issues that commenters mentioned which are not fixed, but I’m trying to work through them, promise! Thank You everyone for your code changes and suggestions!
Timepicker Documentation and Download
Related posts:
35 Responses
max
30|May|2010i can’t use it…
html-code:
—————————————————
$(function() {
$(“#datepicker”).datetimepicker();
});
—————————————————————
it does not work. I can only see a calendar without a clock and two buttons (today, done).
please? help me.
max
30|May|2010my includes:
”
”
”
”
p.s. I can give the web address where you can see it yourself, but here you can not write the address.
max
30|May|2010delete the previous post please…
my includes:
‘jquery-ui-1.8.1.custom.css’
‘jquery-1.4.2.min.js’
‘jquery-ui-1.8.1.custom.min.js’
‘jquery-ui-timepicker-addon-0.4.js’
p.s. I can give the web address where you can see it yourself, but here you can not write the address.
max
30|May|2010i get it..
you should use a complete library of jquery, but not min.
new problem: the scroll is displayed not correctly (in ie and ff exactly), instead of a square which is a thin strip and when you move, it remains in place, although the time varies …
example: _shpinach.narod.ru/aaa.html_
max
30|May|2010i get it…
the whole thing in the wrong style file (css), sorry for the trouble… Thank you for all.:)
Dan
31|May|2010I really want to use this tiempicker as it’s in my opinion the best one out there, but I can’t get it to work inside a gridview edit template. I’m using $(‘.timepicker’).live(‘click’, function() {
$(this).timepicker({showOn:’focus’}).focus();
});
but it only works if I click something else (within edit) before clicking back on it. I’ve pulled by hair trying to figure it out. What I would say is that the .datepicker WILL work with above code, so something must have been overridden.
trent
31|May|2010hey max, Glad you got it working.
hey Dan, Instead of using the live events and creating it every time on click, you might just assign the timepicker either on gridview creation or on edit of the grid row and allow timepicker to work naturally.
Majkel
01|Jun|2010First of all: GREAT WORK, i love this plugin :) but…
I found some errors (maybe my fault):
1. when click on slider (not slide, just click) its not always change time, and sometimes do it wrong
2. when using “stepMinute: 10″ first position of slider give 10, second 00 and rest is ok
it would be nice too, if there will be an option to turn off buttons “today” and “close”
Jorden
04|Jun|2010I have fixed the issue with the stepping, sorta. I noticed that if I hardcode the line with the values, they work. I know its a work-around but it should help out others using the stepping.
EX:
tp_inst.minute_slider = $tp.find(‘#ui_tpicker_minute’).slider({ orientation: “horizontal”, value: tp_inst.minute, min: 0, max: 45, step: 15.0, stop: function () { tp_inst.onTimeChange(dp_inst, tp_inst); } });
Thanks again,
Jorden
Liang Zan
11|Jun|2010Hi Trent,
Thanks for the plugin! It’s the best one I’ve seen so far. Is there a public repo or what?
William
11|Jun|2010Hi !
Your addon seems to be awesome but i can’t get it work…
I can see the calendar with two buttons and an error in my firebug :
$tp.find(“#ui_tpicker_hour”).slider is not a function
Loaded libs are :
jquery/jquery-1.4.2.min.js:
jquery-ui/js/minified/jquery.ui.core.min.js:
jquery-ui/js/minified/jquery.ui.widget.min.js:
jquery-ui/js/minified/jquery.ui.mouse.min.js:
jquery-ui/js/minified/jquery.ui.draggable.min.js:
jquery-ui/js/minified/jquery.ui.droppable.min.js:
jquery-fieldselection/jquery-fieldselection.js:
blockUI/jquery.blockUI-2.31.min.js:
hotkeys/jquery.hotkeys-0.7.9.min.js:
tipsy/javascripts/jquery.tipsy.min.js:
jquery-ui/js/minified/jquery.ui.datepicker.min.js:
jquery-ui/js/i18n/jquery.ui.datepicker-fr.js:
/js/jquery.timepicker.js:
I don’t understand why it doesn’t work… seems to be like @max but can’t try with a jquery unminified version..
i’ll be glad if you can answer me.
Regards
William
11|Jun|2010Well i’m so stupid… i forgot the “slider” lib…
Peter
14|Jun|2010I had an issue with the Minutes slider. I set the step values to 5 min increments and after sliding and going back to the beginning the slider would default to 5 and not 0. It appeared the instance of the slider was reading the previous value after calling the update. I corrected this by updating the minute slider instance code (around line 154). I passed in the event and the ui instance into the slide function (which contain the correct current value of the slider, ui.value) and updated the global minute slider instance with the ui.value. I also setup a local variable for max minute time, which calculates what the max minutes should be based on the step min, instead of hard coding 59, which was causing errors as well. For example if you set a step min of 5, you shouldn’t see 59 at the end, it should stop at 55, which it wasn’t doing.
Here is the code below…
CALCULATION TO FIGURE OUR MAX MIN (added this to the top of the injectTimePicker function)
var minMax = 59 – (59 % tp_inst.defaults.stepMinute);
BEFORE…
tp_inst.minute_slider = $tp.find(‘#ui_tpicker_minute’).slider({ orientation: “horizontal”, value: tp_inst.minute, max: 59, step: tp_inst.defaults.stepMinute, slide: function() { tp_inst.onTimeChange(dp_inst, tp_inst);} });
AFTER…
tp_inst.minute_slider = $tp.find(‘#ui_tpicker_minute’).slider({ orientation: “horizontal”, value: tp_inst.minute, min:0, max: minMax, step: tp_inst.defaults.stepMinute, slide: function(event, ui) {
tp_inst.minute_slider.slider( “option”, “value”, ui.value );
tp_inst.onTimeChange(dp_inst, tp_inst);
} });
Hope this helps someone and/or the author of this plugin (which is fantastic by the way!!!).
trent
14|Jun|2010AAhhh, yes, that makes perfect sense.. Thanks for posting your fix! I will try to update the code this week!
Peter
14|Jun|2010No problem! … It’s a great plugin! …. Glad to see you also do Coldfusion Development!!!
Ricci
17|Jun|2010I would like to use the timepicker addon for doing a date-time range selection. Is it possible?
Mitch
18|Jun|2010Hello,
It appears that the timepicker part of the addon does not fire the on change event like the datepicker does.
Can anybody tell me how to fix this?
trent
21|Jun|2010Hey Mitch,
I’ve had some other users report issues with options and events. I want to address these issues in the next release. The timepicker addon is unfortunately a work in progress.
Ricci,
I don’t believe the plugin will work for date-time range selection.. though I may be wrong. I know as of this point I’ve done no special code for it.
milkboy
21|Jun|2010Am new to Jquery and am very impressed. I hope the quality of other addons I might look for in the future is as good as this one. Thank you very much.
Majkel: Also did not like the buttons. Just change the following code in the addon js file from:
holdDatepickerOpen:true,showButtonPanel:true
To:
holdDatepickerOpen:false,showButtonPanel:false
Now the pop-up closes as soon as you click on a date. Takes some getting used to (you have to first set the time then the date, plus if you just want to change the time in an existing value, you have to click the date again), but is good enough for my admin system. Probably would not use that solution in a public system though.
Kevin
21|Jun|2010I was able to get the onChange event for timeonly to work by adding:
this.$input.keyup(function(){
$dp.find(“div#ui-timepicker-div”).remove();
$.datepicker._beforeShow(dp_inst.input, dp_inst);
});
after
$dp.find(‘.ui-datepicker-header, .ui-datepicker-calendar, .ui-datepicker-current’).hide();
in the injectTimePicker function.
A bit of a hack, I know. But it gets the job done for now…
trent
24|Jun|2010I’ll look at getting this added in Kevin, thanks for your code!
aureltime
11|Jul|2010HI,
thanks for the plugin it is working great
for 19, you dont hava to change the code to do that but use options
.datetimepicker({showMinute: false,holdDatepickerOpen:false,showButtonPanel:false});
For a more logical presentation, it is better to change the order of choice and to have the time sliders at the top, just search and replace after($tp) by before($tp). It could be a nice option.
Thanks for your work and its quality
after($tp)
Jerad Mahesha
05|Aug|2010Hi,
Thank you very much for the Great add-on. But im facing small issue after implementing. Here are the files im using.
$(function() {
$(“#datepicker3″).datetimepicker({
showOn: ‘button’,
buttonImage: ‘images/calendar_icon.gif’,
buttonImageOnly: true
});
});
I dont know what has gone wrong. onece I click the icon its coming with the timepicker but after If I press “next” or “prev” its hiding. can you please help me on this?
Regards,
Mahesha
Jerad Mahesha
05|Aug|2010Sorry, Here are the files
jquery.ui.theme.css
jquery.ui.datepicker.css
jquery.ui.slider.css
jquery.demos.css
jquery-ui-1.8.2.custom.css
jquery_calendar/jquery-1.4.2.js
jquery.ui.core.js
jquery.ui.datepicker.js
jquery_calendar/jquery.ui.widget.js
jquery_calendar/jquery.ui.slider.js
jquery-ui-timepicker-addon-0.5.js
jquery-ui-1.8.custom.min.js
gowri
30|Dec|2010hey
I try to install plugin but i got error
Error: base is not a constructor
and
Error: $tp.find(“#ui_tpicker_hour_” + dp_id).slider is not a function
i have installed ui files in bellow order
jquery.ui.core.js
jquery.ui.datepicker.js
jquery_calendar/jquery.ui.widget.js
jquery_calendar/jquery.ui.slider.js
jquery-ui-timepicker-addon-0.5.js
so please some one help what’s wrong with this…
trent
30|Dec|2010what version of jquery ui are you running?
gowri
31|Dec|2010Thanks for the response
i got using
jQuery UI 1.8.2
trent
31|Dec|2010Sounds like slider isn’t defined. Are you able to add a plain slider on an empty element by itself?
gowri
02|Jan|2011No i can’t .. i got slider is not defined. ok what are the library’s should i add and which order
for (jQuery UI 1.8.2) this version
gowri
02|Jan|2011thanks i got working timepicker by updating jquery 1.4.4 latest version … it’s really awesome
Katie Owens
04|Jan|2011Any chance on the time slider portion we can extend to a 3 position millisecond time?
Confused
14|Jan|2011Hi Trent, first of all, thanks for the wonderful addon.
I do not know if this issue has already been addressed, but from what I had noticed from the demo, if you were to pick the hour value to be more than 10, (eg: 11 or 12) and then only choose your date, the hour will automatically minus off 10 hours from the originally selected hour value.
In a nutshell:
First, i select ’12′ as my hour value, then select a date. Upon clicking on the date, the hour value will automatically be changed to ’2′ instead of the original ’12′. Is this a bug??
Thanks again for the addon. It really helped me out a lot.
Sara
17|Feb|2011hey..
i want to add a timepicker in my textbox control, but i am unable to run programs i got over the net, i do not understand what .js files to include and what css files to include.. can u please send me some appropriate link to a complete package for js 1.4.4
ALSO some source code and demo. i really need it .
sam
21|Oct|2011can someone provide with exact code file and libraries to be used.
trent
21|Oct|2011Include jquery ui with datepicker and slider, jquery, and timepicker addon. Take a look at the documentation (source).