Trent Richardson
Just a delayed announcement that the jQuery Timepicker Addon 0.5 is now available. The most notable fix is the correction of the bug with the stepHour, stepMinute, and stepSecond. Thank you Peter for you help! The next step is correcting some of the options (change events, etc..).
Timepicker Download and Examples
Related posts:
30 Responses
Edward Savage
22|Jun|2010Is there a way to have the dates and times as separate fields?
Charlie G
22|Jun|2010On your examples there is no way to null out a date. When the input contents are deleted, the calender refills the contents. That’s the only show stopper I see.
Other that that, it is looking really good.
I’m not crazy about the sliders for time, but the direct entry is well enough integrated that I doubt it is a problem.
Perhaps, drop downs for hour and minute, but that’s not great either.
The big benefit of the control is that it provides a single control for time with a graphical calender and that it nicely provides a time format. Graphical entry for time that is nice to work with is a challenge, so my critiques aside, good job.
trent
24|Jun|2010Thanks Charlie G
Edward,
You could do date and times as separate fields only if you create two separate pickers (which i dont think is what you’re asking.. a datepicker for the date field and a timepicker for the time field
hads
28|Jun|2010Very cool, this is exactly what I’ve been looking for.
I agree with Charlie G that not being able to null out a date is a little annoying but great work indeed.
The style is a bit messed up using smoothness theme but that’s no big deal.
Well done.
Edward Savage
29|Jun|2010That is what I am asking, Trent. I will have dates and times as separate fields, and want each field to have its own picker. Thanks for your answer, I will repost if I have trouble with it.
patricia
29|Jun|2010Hello,
love the plugin, but found a minor error in your documentation:
t
a or p for AM/PM
tt
A or P for AM/PM
T
am or pm for AM/PM
TT
AM or PM for AM/PM
this should be:
t
a or p for AM/PM
tt
am or pm for AM/PM
T
A or P for AM/PM
TT
AM or PM for AM/PM
jaakko
30|Jun|2010I don’t know if this should be classified as a bug of some sort but when you select a date the highlight doesn’t move to that new date until you click Done and go back to the calendar. I guess it’s because the original datepicker closes after clicking on a date. It somewhat bothers me, and don’t know how to mess with the source to fix it. :P
Edward Savage
30|Jun|2010I’ve accomplished what I wanted like this:
$(‘input.time’).timepicker({
ampm: true,
timeFormat: ‘h:mm tt’
});
I’m experiencing two issues when trying to manually change the time:
1. I cannot enter anything but digits into the field, preventing me from typing ’12:31 pm’, for example
2. When the field loses focus, the manual changes I made are lost, and the date fields hold whatever was selected on the picker. The only time a manual change is kept is if I change focus a field with a date or time picker with my mouse.
trent
30|Jun|2010Patricia,
Thank you for catching the mistakes.. i was just looking though the docs and found a couple more typos too.. I’ll try to get these corrected
jaakko,
Yes, currently it relies heavily on the datepicker, and that is another issue which needs to be address.
Edward Savage,
There were some changes which altered the restriction of manual input a while back. I will have to go back and look at this.
Edward Savage
30|Jun|2010Thanks Trent! This is a fantastic add-on, and I am grateful that you’ve created it.
AbidCharlotte49er
30|Jun|2010Hey Richardson, Thank you so so much for your work. I was trying to use your add on with jquery-ui-1.8.2.custom.min.js. but i got some wierd errors. So just letting you know your add on worked perfectly well with jquery-ui-1.8.custom.min.js.
Thanks once again
AbidCharlotte49er
Edward Savage
30|Jun|2010@AbidCharlotte49er, I am using jQuery UI 1.8.2 (custom), with all the options, and the time picker is working great.
Jermaine
01|Jul|2010Hi Trent,
I really appreciate your work on the datetimepicker. However is it also possible to add a selectbox for the hours and minutes instead of sliders?
Thanks,
- Jermaine
jbator
06|Jul|2010@jaakko, you can add onSelect option with some callback function to make highlight moved to the selected day:
jQuery(“#some_input”).datetimepicker({
dateFormat: ‘yy-mm-dd’,
onSelect: function(dateText, inst) {
jQuery(“.ui-state-active”).removeClass(‘ui-state-active’);
jQuery(“.ui-state-hover”).addClass(‘ui-state-active’);
},
});
umatty
07|Jul|2010Hi
Great Timepicker addon, when the datepicker is displayed inline by using a div element the timepicker does not get added on. Is there a way to display both inline and not on an input?
Thanks
Ubaldo Matty
Darek
25|Jul|2010Great work!. Thanks for this addon.
… but I have e problem with it:
I have a form:
…
…
$(“datetime”).datetimepicker();
When I don’t set field “datetime” in form for default datetimepicker() set this field “now date and time” when I submit form. But I am going to have this value only if I set manualy this field. When I not set manually – this field must be empty.
How I can get empty this field (without date and time) ? Always plugin set for default “NOW” date and time.
Thanks for answer.
Torsten
28|Jul|2010Hi there,
i get this error:
Error: $tp.find(“#ui_tpicker_hour”).slider is not a function
Sourcefile: http://localhost/sandbox/datetimepicker/js/jquery-ui-timepicker-addon-0.5.js
Col: 163
Any idea?
Separatista
28|Jul|2010I want to hide buttons (showButtonPanel: false), but when using datetimepicker, this parameter does not work :-(
Torsten
29|Jul|2010Timepicker does not work with multiple textboxes
$(‘input’).filter(‘#datepicker’).datetimepicker({ …
Jing
03|Aug|2010great plugin meets my needs exactly… but seems I had a little problem implementing :(
recently I am doing a rails application with .haml as my view format. So I included javascripts
jquery.ui.core”, “jquery.ui.datepicker”,”jquery-ui-timepicker-addon-0.5″ and use
:javascript
var $j = jQuery.noConflict();
$j(function() {
var dates = $j(‘#from, #to’).datepicker({
defaultDate: “+1w”,
changeMonth: true,
numberOfMonths: 1,
onSelect: function(selectedDate) {
var option = this.id == “from” ? “minDate” : “maxDate”;
var instance = $j(this).data(“datepicker”);
var date = $j.datepicker.parseDate(instance.settings.dateFormat || $j.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker(“option”, option, date);
}
});
});
this function is to filter data by selecting start time and end time. However, when I replace datepicker with datetimepicker,
it only adds button today and done. But the today button is disabled and no sliders for time picking.
what do you think might cause the problem. I am really hoping I can add this datetimepicker
to my app. Thanks so much!!
Dirk
11|Aug|2010@Torsten
I ran into the same problem. When you created your custom jquery_ui, did you include the Slider widget? That could be your problem; it was mine.
Bram Van der Sype
12|Aug|2010This has been a lifesaver! Thanks a bunch!
Bram Van der Sype
12|Aug|2010One minor problem I have encountered: is there any way to prepopulate the datetime (or time) field correctly?
At the moment I use the setDate method even with the datetimepicker, which works, but now my datetime field shows only my date, not the time.
Ideally, their should be a setDateTime method.
File recovery software
21|Aug|2010Hello,
I saw your post. I want to suggest some words. TimePicker is a plugi n to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a drop down menu. The plug in will automatically works.
Thanks
Photo recovery
Deedod
25|Aug|2010Great time picker plugin. By far the best I’ve been able to find online.
A couple of possible future functionality requests would be:
1. Display Format – Add an extra parameter where you can set a different display time format that appears in the picker overlay so that you can have the value that the user sees be in an easier to read format and then the actual form field value could be something else.
2. Display Field vs Form Field – Add the ability to specify a field where the display formatted date/time from #1 is displayed on the page while the actual real form field could be a hidden field that is updated with the machine readable date format.
Again, wonderful plugin though.
urlingo
28|Aug|2010Hi,
Wonderful plug-in. Exactly what I was looking for. I have a problem implementing it as an inline element. When I do that the time sliders are not showing. Am I missing something? Please help.
Thanks a bunch.
RussianBear
04|Sep|2010Very nice plugin)
It would be useful to add localisation support…
Jesterz
07|Sep|2010Hi,
I am a noobie to these (Rails, javascript, jQuery, etc). This is really a easy to use datetime picker.
I want to set an end_datetime to be equal to the start_datetime after the user changed the start_datetime.
I’ve tried tracking onchange (which apparently is triggered only by a change in date, but not triggered by changing the time) and onblur (which provides me with the previous setting because the onblur event happens when the datetimepicker appears).
How/what should I do to set the end_datetime when the user changes the start_datetime?
Also, how should i format date and time? {dateFormat: ‘yy/mm/dd’, timeFormat: ‘hh:mm’} ?
Thanks.
Tabitha
10|Sep|2010Hi,
The datetimepicker is working great. I’ve a question tho about the today button. It appears disabled on the picker and clicking on it does nothing. The following are the js classes I’ve included other than the one you have for the date time picker:
I notice the same disabled behavior of the “today” button on this site as well. Could you tell me how I can fix this or at the very least remove the button itself? Thanks a lot!
Mark L
09|Aug|2011Could someone mind sharing a tutorial (start-finish) on configuring datepicker? I have this in my rails code http://pastie.org/2345556 but am not getting the calendar to popup. No errors in the browser console. Not sure what I am missing. If anyone hangs out in irc somewhere shoot me the room and you username so I can pick your brain. Thanx!