Since I’ve not found a timepicker suitable for my needs (although there are some pretty decent ones out there) I decided to make one. I needed date-time and just time, so built it on top of jQuery UI’s Datepicker, so I have access to just one or both. A couple key features in this addon I’ve not found in a few of the others is time formatting, seconds, time step (10 min, 20 min, 30 min, etc..). Not to mention that all datepicker options should still be available.
If you use just datepicker you have no changes in your code. If you decide to use date and time, then there is a function for you:
$('.datetimeinput').datetimepicker();
And if you just want a timepicker:
$('.datetimeinput').timepicker();
This still uses datepicker just for time, but it hides the calendar and strips out the formatting for the date, thus only leaving the time. I’ve put together some documentation and examples as there are quite a few additional options besides just datepicker options.
175 Responses
Jeffrey Gilbert
Apr 19, 2010nice.
kcp
Apr 20, 2010One of the cleanest timepicker solutions ive seen! Great Work!
Abai
Apr 21, 2010Hello, Trent!
Thanks for a awesome datetimepicker plugin!
ARuizNa
Apr 21, 2010It`s an excelent addon.
But…
I´m having problems with the stepMinutes, if a set it with 30 the UI slide do not detected the first change, which one should show “30″ in the minutes field. This do not stop there, if I return to “0″ position in the minutes field insert “30″.
Can you help me.
Thanks
,Regards.
Chris
Apr 23, 2010Awesome control!
Really simple and efficient, though I just have a quick question.
Is there any way to just get out the time parts of the control? For example I have two time pickers (one for a start time, one for an end time) and I want to use the hour and minute parts to calculate a “total trip time.”
Thanks again.
trent
Apr 23, 2010ARuizNa,
I noticed this one time but I think it was just the UI Sliders acting funny.. not sure if it has to do with the new UI 1.8 or not.. its not declared the stable version yet, its just compatible with jQuery 1.4. The plugin may work with the UI 1.7 and jQuery 1.3 though..
Chris,
I may need to add some getters and setters, or add the time to the callback methods so they can be accessed there. If you are handy with javascript the current time for that picker is always kept in hour, minute, and second variables of the Timepicker class.. just need to add those parameters to the callback function (on the source side, then you can grab them on your side). This is version 0.1 so there are still a couple small things like this to be added..
ARuizNa
Apr 28, 2010Thanks trent for the quick answer… I understand this is de version 0.1 an it working excellent for this number. :)
,Regards.
Charles
Apr 29, 2010Hello,
I’m moving over from the datepicker, and to set the date, my call:
$(‘.date-pick’).datepicker(“setDate”, new Date(“March 12, 2010″) );
causes an error, so I tried:
$(‘.date-pick’).datetimepicker(“setDate”, new Date(“March 12, 2010″) );
but that does not set the date.
How do I set the date?
Thanks
Reinout
Apr 30, 2010Looks great!
I had to make a small change though since any hour below 12 changed to it’s PM alternative when working with a 24 hour schedule :
this.ampm = ((treg[order.t] == undefined) ? ” : (treg[order.t].charAt(0).toUpperCase() == ‘A’) ? ‘AM’ : ‘PM’).toUpperCase();
to :
this.ampm = ((treg[order.t] == undefined || treg[order.t].length == 0) ? ” : (treg[order.t].charAt(0).toUpperCase() == ‘A’) ? ‘AM’ : ‘PM’).toUpperCase();
since treg[order.t] is an empty string and not undefined, and as a result in the former case I always ended up with “PM” instead of an empty string.
trent
Apr 30, 2010Charles, this is part of some of the current short coming of version 0.1. You can maybe set the date in your .date-pick text
$(‘.date-pick’).text(‘March 12, 2010′);
$(‘.date-pick’).datetimepicker();
Then the date should be set. I am currently looking at how to extend datepicker better so that you still have access to these functions..
Reinout,
Thanks for the catch, I will update the source with this correction. I’ve got a few notes on improvements, the next release should be significant as far as functionality is concerned
Jeremy
Apr 30, 2010Fantastic work, this is by far the best date and time picker I’ve seen. I like how you retained the original date picker, and implemented your work as an add on.
I made one change to the addTimePickerFunction. I changed line 62, from “.replace(/\s/g,’\\s?’);” to “.replace(/\s/g,’\\s?’) + ‘$’;” because my time format is “hhmm” instead of “hh:mm” so the regex wasn’t able to isolate the time components of the text.
Jeremy
Apr 30, 2010I also overrode the _doKeyPress event of the date picker like you did with the _selectDate. I needed the ability to allow spaces because a user needs to enter the time portion by typing.
Not my favourite solution, but it works.
$.datepicker._doKeyPress = function(event) {
var inst = $.datepicker._getInst(event.target);
if ($.datepicker._get(inst, ‘constrainInput’)) {
var chars = $.datepicker._possibleChars($.datepicker._get(inst, ‘dateFormat’));
var chr = String.fromCharCode(event.charCode == undefined ? event.keyCode : event.charCode);
return event.ctrlKey || (chr -1);
}
}
rangzen
May 01, 2010Hello,
how do you specify a date format with mm used by month and date?
Thanks.
trent
May 03, 2010most all date operations should follow the original datepicker options
trent
May 03, 2010Thank you Jeremy for posting your fix, much appreciated!
Reinout
May 03, 2010Jeremy, I created another fix for updating the time in the textbox, but I had to request an update on the jquery library for this :
http://dev.jqueryui.com/ticket/5574
What I added in the datepicker code :
_notifyUpdate: function (inst) {
var onNotifyUpdate = this._get(inst, ‘onNotifyUpdate’);
if (onNotifyUpdate)
onNotifyUpdate.apply();
},
And inside the _updateDatepicker event I added :
this._notifyUpdate(inst);
},
In the _timepicker addon code :
injectTimePicker: function (inst) {
var $theDP = $(‘#’ + $.datepicker._mainDivId);
// Prevent displaying twice
if ($theDP.find(“div#ui-timepicker-div”).length == 0)
…
And (below onClose) :
onClose: function (dateText, inst) {
tp.updateDateTime(inst, tp);
if ($.isFunction(o['onClose'])) o.onClose(dateText, inst);
},
onNotifyUpdate: function (inst) {
tp.addTimePicker();
if ($.isFunction(o['onNotifyUpdate'])) o.onNotifyUpdate(inst);
}
The textbox is not updated yet when changing the sliders, but I will try that later on. I want to get this fixed properly first.
Reinout
May 04, 2010Forget my last comment, I did it in another way. Will try to send the updated script by e-mail since it will be cumbersome to post every change in comment.
trent
May 04, 2010I posted a few of the changes last night to make version 0.2.
Avi
May 04, 2010Very cool, very smooth, integrates nicely. It has two problem that I see:
1) when you select a date, the datetimepicker remains open, as it should, and it updates the input field, as it should… but it wipes out the time. The time is updated only when you close.
2) minDate: If you use minDate option for the datepicker, it really sets the hour to an odd hour.
Avi
May 04, 2010I haven’t figured out the minDate, but I did get the live update by a slight mod of your code.
1) Replace line 277-278 (inside $.datepicker.selectDate) as follows
/* BEGIN DELETE
if (inst.input)
inst.input.val(dateStr);
END DELETE */
/* BEGIN ADDED */
// our dateStr must include the time
var doUpdate = this._get(inst,”updateDateTime”);
if (doUpdate) {doUpdate(inst);}
else {
if (inst.input)
inst.input.val(dateStr);
}
/* END ADDED */
2) Inside jQuery.fn.datetimepicker (around line 247), after onClose:, add the following
updateDateTime: function(inst) {
tp.updateDateTime(inst, tp);
}
It now updates the date and time every time you select a date. For the time as well, in real-time update, the following works:
3) At the end of onTimeChange: (around line 157-158), add the following:
this.updateDateTime(inst.inst,inst);
Voila.
Jeremy
May 04, 2010Avi, I think your change causes the date/time to be set as soon as you open up the date picker. I don’t think that is necessarily desired behavioir
ronald
May 06, 2010NICE LOOKING ADD-ON!!!!
I want to use this great addon but i have a little problem.
I want to display the timepicker when i click a inputfield. The first time i click in the inputfield it does nothing (firebug places an extra div with noting in it). Only when i click the inputfield for a second time (after clicked somewhere else) the timepicker pops up.
The datepicker DOES work but i only need to set the time..
Does anyone have an idea why?
Thanks!
chris
May 24, 2010Yeah – this is the closest I’ve found to a perfect date/time plugin – great work, Trent.
Pardon my greediness but I could REALLY use these two things though:
1.) A fix for for wonkiness with the minutes slider (I’m trying to set in 30 minute steps but like others it’s behaving oddly onload, and as I drag it)
2.) Ability to control range of hours allowed (i.e. force 6AM – 9PM selection only)
Is there anyone out there who has already hacked in either of these things themselves?
Darek
May 25, 2010I have problem with datetimepicker:
If:
and:
$(“something”).datetimepicker();
… and this input is in . When I don’t select date, and save form, next time when I show this form whith this data (this saved record), plugin write in input CURRENT DATE. I check the database – date in this rerord is empty.
Darek
May 25, 2010I have problem with datetimepicker:
If:
”
and:
$(“something”).datetimepicker();
… and this input is in ”. When I don’t select date, and save form, next time when I show this form whith this data (this saved record), plugin write in input CURRENT DATE. I check the database – date in this rerord is empty.
Ricci
May 26, 2010I’m really thankful for this add-on to the datepicker. :) I also would like to solicit some insights on incorporating this to the date range. at the moment im only using the sample code for date ranges, and somehow would like to add the time value in the logic.
$jq(document).ready(function() {
var dates = $jq(‘#daterangetag-1, #daterangetag-2′).datepicker({
showButtonPanel: true,
defaultDate: “+1w”,
numberOfMonths: 2,
onSelect: function(selectedDate) {
var option = this.id == “daterangetag-1″ ? “minDate” : “maxDate”;
var instance = $jq(this).data(“datepicker”);
var date = $jq.datepicker.parseDate(instance.settings.dateFormat || $jq.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker(“option”, option, date);
}
});
Thanks very much if you could shed some light on this. :)
Dan
May 28, 2010I’ve got the min hours max hours working:
changed file to support an hourMax and hourMin value, which can now be called in the original constructor. Added these fields into timepicker default, with default values. In inject timepicker -> tp_inst.hour_slider = $tp.find(‘#ui_tpicker_hour’) -> have added min, set to tp_inst.defaults.hourMin and have changed max from 23 to tp_inst.defaults.hourMax. Now declare in constructor hourMin:10 etc.
However, having issues getting the timepicker to display in a Grid edit template field. Have been tyring to use jQuery live -> $(“.timepicker”).live(‘click’, function () {
$(this).datepicker({showOn:’focus’}).focus();
This will display if I click it, then click something else, then click the field again. It won’t display first click. By comparison, the datepicker will display first click with the above line of code.
Kevin Pauli
Jun 08, 2010Nice work. I have a data binding framework I wrote, and I found it necessary to add this at line 265 so that it would fire the change event I am listening for:
this.$input.trigger(‘change’);
Peter
Jun 14, 2010@Chris / and anyone else who has issues with the Minute slider,
I 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);
} });
I made this comment earlier on a different blog post on this site and Trent was going to place this fix as soon as he could get to it. Hopes this helps!
Mitch
Jun 18, 2010Hello,
Maybe i am doing something wrong but it appears that the timepicker does not trigger the onchange event.
can anybody tell me how to make it trigger?
Nilesh
Jun 26, 2010What I added in the datepicker code :
_notifyUpdate: function (inst) {
var onNotifyUpdate = this._get(inst, ‘onNotifyUpdate’);
if (onNotifyUpdate)
onNotifyUpdate.apply();
},
And inside the _updateDatepicker event I added :
this._notifyUpdate(inst);
},
In the _timepicker addon code :
injectTimePicker: function (inst) {
var $theDP = $(‘#’ + $.datepicker._mainDivId);
// Prevent displaying twice
if ($theDP.find(“div#ui-timepicker-div”).length == 0)
…
And (below onClose) :
onClose: function (dateText, inst) {
tp.updateDateTime(inst, tp);
if ($.isFunction(o['onClose'])) o.onClose(dateText, inst);
},
onNotifyUpdate: function (inst) {
tp.addTimePicker();
if ($.isFunction(o['onNotifyUpdate'])) o.onNotifyUpdate(inst);
}
The textbox is not updated yet when changing the sliders, but I will try that later on. I want to get this fixed properly first.
Matt
Jul 24, 2010This is by far the best datetime picker I have seen! Exactly what I was looking for, nice work!
BUT… I am stuck, for now, with jQuery 1.3 and jQuery UI 1.7. Do you expect this to be compatible?
I’ve tried it in this environment, and am finding that the next/prev in the datepicker section is not changing the month, so you cannot move beyond the existing month for date selection.
Do you think that this is an issue w/ the older jQuery? I see the examples use 1.4. Do you have any suggestions??? Figured it was worth asking…
Thanks!
Jarek
Aug 24, 2010Thanks for this plugin. It’s great.
Eduardo
Sep 01, 2010It’s amazing but i am missing a feature.
In the standard datepicker i always use the altField: and altFormat: so it seems the h:m:s is not getting propagated to the altFormat.
Also the mm format in the datepicker is for month leading zero so there is a conflict with minutes here.
Any chance to add this feature?
Thanks
Radical
Sep 16, 2010Once I click the empty text box the date time is set at lost focus and then it is impossible to make the text box empty again. Or it is also impossible to make empty the text box after a date is selected. My date is not mandatory and user should be able to set blank date or remove the date. How it is possible?
Dominic
Sep 21, 2010I can’t get it to work with datepicker ‘Event Search’ where you have two datapicker fields with an id of #from and #to.
The datetimepicker calendar opens and closes fine, and I can choose a time but when I choose a date it takes me to a different page on my site.
I’ve tried over-riding with an additional onclick event and added .preventDefault() but then the calendar won’t open at all.
Dominic
Sep 21, 2010Further to this problem. I noticed that there is an error thrown up in FireBug which says that the dates variable is undefined. If I comment out the line
// dates.not( this ).datepicker( “option”, option, date );
it stops the page going to a new page on my site but I also lose the ‘Event Search’ capability – so this is not a solution.
Gerrit
Sep 22, 2010Is there a way to use the timepicker fixed on a page – not as popup?
I tried this for a div container:
$( “#datepicker” ).datetimepicker();
But there are no time-controls.
Fman
Sep 23, 2010CAN’T CLEAR IT!
Hi,
if I click in an emtpy textfield, the DateTime-Picker opens, field stays empty.
When I close the picker without selecting any date/time, the field ist autofilled!
When I click in the textfield to clear it, the DateTime-Picker opens again…endless loop.
How can one remove a datetimevalue in the textfield? Is there a Clearbutton e.g. available?
regards,
FM
trent
Sep 23, 2010Fman, Are you using the version from the docs or github? I recently committed a fix for this on github:
http://github.com/trentrichardson/jQuery-Timepicker-Addon
trent
Sep 23, 2010Gerrit, this issue has been fixed in the latest commit on Github
Fman
Sep 23, 2010Hi trent,
upgraded to your Githhub version (rather than version on this site), works perfect now
thx,
FM
Leanne
Oct 07, 2010Hi there, I can’t seem to get the date/time picker working. I’m not sure why. It displays NaN instead of numbers and the time picker doesn’t display at all? (http://citysouthphysio.website.2010.360southclients.com/book-appointment.html) If someone could help me, that’d be great :)
Leanne
Oct 07, 2010Ok, I worked it out, seeing that I’ve got the system inside Joomla, MooTools was the problem. Great script by the way! :)
Grant
Oct 21, 2010Is there any way to not have the field that the picker uses be read only? I have some people who like to use the picker, but some like to type it manually.
trent
Oct 21, 2010Grant, it shouldn’t be readonly, there may be a bug in the latest release. Check the version on Github
Grant
Oct 21, 2010I just downloaded the code from Github.
http://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/master/jquery-ui-timepicker-addon.js
I’ll check to see if there’s a bug elsewhere on my page.
Thanks
Grant
Oct 22, 2010It looks like it has to do with the jQuery populate alternate field option, not your customization. When using that the field the calendar uses is read only.
http://jqueryui.com/demos/datepicker/#alt-field
Thanks
Alejandro Diep
Oct 22, 2010i had the same problem as Dan’s comment (#27) and a (maybe) hard workarround was add the ‘mouseover’ eventType and it works for me.
$(“#hour”).live(‘mouseover click’, function() {
$(this).timepicker({showSecond: true, timeFormat: ‘hh:mm:ss’, stepSecond: 10});
});
manfer
Oct 27, 2010This works really well.
The only problem I found is that I have no way to parse the datetime to get a Date. The jquery datepicker gives that posibility with getDate method. If I call that function in a datetimepicker I get a Date with only the date not a Date with date and time because it calls the jquery datepicker method. It would be fantastic if this add-on had its own getDate method taking hour into account too.
Or maybe there is a way and I haven’t figured out how.
trent
Oct 27, 2010Hey manfer,
In the version on Github there is an attempt to get this working. However it needs some fine tuning to get it working smoothly if you are at all handy with some js/jquery. I’ve not had a ton of time to spend with it the last couple weeks.
I’m even ok if it comes down to creating a separate method getDateTime/setDateTime rather than overriding datepicker’s methods
Nelvios
Oct 27, 2010Hey trent,
Thanks for the addon, it’s a really nice one :). Still, I’m kinda getting a problem here. See, I have multiple datetimepickers in one of my forms. When I change any of the datetimepickers, the input value changing is only the first one. Can you fix it? Please?
sas
Oct 28, 2010What is minimum requirements Which versions of jQ and jQ UI? I cannot make this work.
Kyle
Nov 05, 2010Has anyone been able to use the timepicker as an inline option? I tried, but the only way I know of being able to use datepicker inline is utilizing the callback feature:
onSelect : function(dateStr, inst) {
$().val(dateStr);
}
I tried to modify the timepicker with very little success. Too new I guess. Any guess/help?
Adam Edwards
Nov 11, 2010The problem stated by Dan in post #27 can be solved easily by changing the click event which is bound to live to focus as below:
// Bind datepicker to start input
$(‘#input’).live(‘focus’, function() {
$(this).datetimepicker();
});
dotTwelve
Nov 18, 2010Hi,
$.datetimepicker.(“getDate”) is returning me for examle this cases:
19.11.2010 0:00:00 -> Fri Nov 19 2010 00:00:00 GMT+0100 (Central Europe Standard Time)
19.11.2010 6:40:23 -> Fri Nov 19 2010 00:40:23 GMT+0100 (Central Europe Standard Time)
19.11.2010 11:40:23 -> Fri Nov 19 2010 00:40:23 GMT+0100 (Central Europe Standard Time)
19.11.2010 12:00:00 -> Fri Nov 19 2010 00:00:00 GMT+0100 (Central Europe Standard Time)
19.11.2010 23:59:59 -> Sat Nov 20 2010 01:59:59 GMT+0100 (Central Europe Standard Time)
trent
Nov 18, 2010looks like the hours aren’t setting properly?
snicky
Nov 18, 2010Sorry for a stupid question, but… how to change the text on the ‘Done’ button?
snicky
Nov 18, 2010OK, I just needed to use ‘closeText:’
monlio
Nov 25, 2010Hello sorry for my bad english.
Thanks for datetimepicker addon, it’s working very well, but I’ve got a problem, i would like to use two dates (one start_date one end_date) end_date depending of the start date. I try a script wich is working with datepicker but i need to select hours and minutes. But when i use datetimepicker, the second date is not depending of the first. Can you help me please.
Thanks for all.
monlio
My script:
$(function () {
$(‘#date_depart’).datetimepicker({
//beforeShow: customRange, appel de la fonction AVANT
duration: ”,
showTime: true,
time24h: true,
constrainInput: true,
formatDate: ‘dd-mm-yy’,
stepMinute: 5,
timeText: ‘horaire’,
hourText: ‘heures’,
minuteText: ‘minutes’,
hourGrid: 4,
minuteGrid: 10,
minDate: +1, maxDate: ‘+1Y +1M’ //mindate = ajourd’hui ET maxDate = dans un an + 1 mois
});
var checkInDate = $(‘#date_depart’);
var checkOutDate = $(‘#date_retour’);
checkInDate.datetimepicker({ onClose: clearEndDate });
checkOutDate.datetimepicker({ beforeShow: setMinDateForEndDate });
function setMinDateForEndDate() {
var d = checkInDate.datetimepicker(‘getDate’);
if (d) return { minDate: d }
}
function clearEndDate(dateText, inst) {
checkOutDate.val(”);
}
});
dapio
Nov 28, 2010great work! i have problem with option defaultDate, which was in original datepicker. Is there option to set up date at the beginning?
alex
Dec 16, 2010very very bad…. it’s not possible to initialize date from beginning… or set date through jscript directly….
this sample does not work at all!!!
ex13.datetimepicker(‘setDate’, (new Date()) );
but i think it must work
i use :
* jQuery timepicker addon
* By: Trent Richardson [http://trentrichardson.com]
* Version 0.7
* Last Modified: 10/7/2010
in extjs it may like – dp.setValue(new Date) – simple and smart
but this timepicker is VERY awful
trent
Dec 16, 2010alex,
Please upgrade, there have been many signifigant revisions since version 0.7, including setDate method. Go to the Github page and pull from dev. Hopefully then you will retract your “AWFUL” statement :)
dGo
Dec 21, 2010very nice indeed…
The nicest script I’ve found so far.
thanks !
Victoria
Jan 19, 2011Hi
Is there a way to disable Now button ?
thanks
Victoria
Will
Jan 27, 2011I think there’s a bug in the latest version (0.9.2 and 0.9.3) – the displayed time and time sliders are not correctly reset when the picker is opened and no time is specified in the target textbox.
To repro:
1. Open the datetimepicker from an empty textbox – both the date and time selections are correctly initialized to their default values
2. Close the picker and specify a date/time in the textbox and open the picker – both the date and time selections are correctly set to the values specified in the textbox
3. Close the picker again, clear out the date/time in the textbox, and open the picker – now the picker displays the correct date, but the displayed time and time sliders are not reset to their original default values (i.e. 12:00 AM)
-Will
Hermit
Jan 28, 2011I have traced the slider problem to the line
treg = timeString.match(new RegExp(regstr, ‘i’)); in the datepicker addon code.
its showing the value as 01/28/2011 12:10 pm,2,10,pm In hours it is showing 2 instead it should show 12. I think the regstr is not being constructed properly
trent
Jan 28, 2011Hermit,
Please pull the latest from the dev branch on github, it includes this fix among others
Hermit
Jan 28, 2011I have been using Version 0.9.2 which i downloaded from the page
https://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/master/jquery-ui-timepicker-addon.js
Isnt this the latest code?
trent
Jan 28, 2011Close but not quite. That link pulls from master. The Dev branch has the fix:
https://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/dev/jquery-ui-timepicker-addon.js
cdbrkpnt
Jan 31, 2011the hour issue fixed
and is working great with simple addition of this code at line no 184
.replace(/h{1,2}/ig, ‘(\\d{1}?\\d)’)
avk
Feb 01, 2011Fix for Hour Issue:
change line 198 to
regstr = ‘.{‘ + dp_dateFormat.length + ‘,}[\\s*' + this._defaults.separator.replace(/\s/g, '\\s?]‘) + regstr;
Lupin Sansei
Feb 03, 2011As far as I can see there are still two bugs in the github repository:
One is the timepicker doesn’t render am/pm initially when it opens, only after an update of the sliders. This can easily be fixed by removing the if statement on line 540 that checks if something was updated.
The second is more subtle, when you set a minimum time to be selected that has a minute value, then this minimum will be enforced for all hours of the “critical” day, not just the minimal hour.
Keep up the great work!
Lupin Sansei
Feb 03, 2011sorry the line number in the github version is 550, it was 540 is my local patched version
trent
Feb 03, 2011Hey Lupin,
I believe if you pull from the dev branch the am/pm bug is fixed. The second I believe you want the look at the differences between the options minuteMin and minDateTime as one of those may better suit your need?
Khalid
Feb 07, 2011Hi,
I am using this great addon and i want to be able to disable it and enable it on demand, is it possible?
Thanks by advance.
Lupin Sansei
Feb 07, 2011Hey Trent,
thanks for your reply, the am/pm bug is fixed, nice! I don’t understand the advantage of minuteMin or minDateTime though. minDate does exactly what I want it, it allows the user to only select a timestamp (i.e., date and time) larger than minDate. However, on the minimal day, and only on it, the minutes cannot be lowered below the minutes specifed in minDate, even if the hour is larger than the minimal hour allowed. Do you understand what I mean? Maybe I’m missing something obvious!
Thanks!
Lupin
Jadsadah
Feb 17, 2011Hi Trent – really great work!
I’m trying to get some functionality, but unfortunately without results. Is it possible to set (or rather dunamically change) the minDate option, after init like in the case of pure datapicker?
$( “.selector” ).datepicker( “option”, “minDate”, new Date(2007, 1 , 1) );
I’m able to dynamically limit the range of dates using (where #fromTime is datetimepicker in fact), but only dates (not the time (hour/minutes constraint)):
$(“#fromTime”).datepicker(‘option’, ‘minDate’, new Date(dtMin));
$(“#fromTime”).datepicker(‘option’, ‘maxDate’, new Date(dtMax));
Regards,
Jadsadah
Feb 17, 2011I found a some kind of workaround, but i’m not especially happy from this resolution:
$(“#from”).datetimepicker(‘destroy’); //destroying previous object
//and once again, creation of datetimepicker in the same div ID
$(‘#from’).datetimepicker({
ampm: false,
showSecond: false,
stepMinute: 15
, minDate: new Date(dtMin),//new dtMin
maxDate: new Date(dtMax)//new dtMax
});
Any better ideas? :)
My best regards guys!
ingemar
Mar 04, 2011hi,
thanks for the great timepicker addon :)
i have following problem:
$(‘#datetime_from’).bind(‘dateSelected’, this._onLoginButtonClicked);
how can i bind to the dateSelected event?
thanks,
ingemar
arthur moura
Mar 13, 2011can not invoke the functions for fields cloned.
function () {
$(‘#horarios’).append(“”);
var novoCampo = $(‘.selectData:first’).clone();
var nrDeCamposData = $(‘.selectData’).length;
novoCampo.attr(‘name’, ‘horarios[' + nrDeCamposData + '].hora’);
$(‘#horarios’).append(novoCampo);
$(‘.selectData’).timepicker(); // don`t work.
}
actually happen?
Naveed
Mar 17, 2011hi,
i want to update input box with selected date when click on done button, not on just selecting date or time. it update when done is clicked
Rohit
Mar 25, 2011Hello ,its very helpfull.i am new in jquery. Can anyone tell me how can i change theam of that datepicker.
Jonny
Mar 29, 2011Message: Object doesn’t support this property or method
Line: 344
Char: 4
Code: 0
I’m getting this error. Any ideas?
trent
Mar 29, 2011Do you have jquery ui included with datepicker and slider modules?
kenny
Apr 01, 2011i haveset default time
hour: 15, minute: 30,second: 0,
and it displays that time when i open datepicker however if i click done without changing anything it will not pick up date and time, i need to change something (date.hour,mnute) then change it back before it picks up date and time
Parag
Apr 04, 2011nice work trent. thanks a lot…
DoanAnh
Apr 12, 2011Hi Trent, your addon is so great but i dunno why i cannot get it working in my project. It seems that i downloaded all the necessary files (jquery js & css: jquery-1.4.4.min.js, jquery-ui-1.8.6.custom.min.js, jquery-ui-timepicker-addon.js and jquery-ui-1.8.6.custom.css). do i miss st?
DoanAnh
Apr 12, 2011Oh, sorry i got it working. My mistake!
Phil
Apr 14, 2011Hi Guys! Is there’s a way or options to configure or change the slide div into select option box? Need help with this. Thanks in advance.
trent
Apr 15, 2011Currently there is no option for this. It would require a bit of restructuring as the plugin is currently built around the sliders, but would be possible, and probably not super complex change…
nishad
Apr 25, 2011Can’t seem to make this work.
this is my HTML code
|
$(‘#example1′).datetimepicker();
Felipe Salazar
May 20, 2011getDate doesn’t work for the timerpicker, whether I use $(‘#example3′).timepicker(‘getDate’) or $(‘#example3′).datetimepicker(‘getDate’) or … try it on example3
Cy
May 26, 2011Hey, I have the same feature request as Eduardo (#34). Any chance of this getting implemented?
priya34074
Jun 21, 2011Hi
I have From datetime as say 21st Jun’11 17:25 and I want To datetime not to be lesser than From datetime if , I am using the code below:
onClose: function () {
$(“input[Id$='txtDueDate']“).val(”);
var min = new Date(Date.parse($(“input[Id$='txtDueFrom']“).val()));
$(“input[controltype$='DueTodate']“).datetimepicker(“option”, “minDate”, min);
}
});
It sets the MinDate to 21st jun but it allows to select time less than 17:25 .
Please suggest correction in my code.
Sapana
Jun 21, 2011this time picker is not working with jquery-1.5.1.min.js and jquery UI 1.8.13
Rishad
Jun 22, 2011Hello. Thanks for this great widget.
1 problem:
When I load my form, that includes the widget, and I already have a date and time for eg. 23-May-2011 09:00. Then I click on the calendar button which loads the datetimepicker and the calendar is set to the correct date, but the time slider is set to 00:00. Ideally, the time slider should have been at 09:00.
Is there a setting that I’m missing?
Thanks, Rishad
GoneNuts
Jul 08, 2011Hi thank you for the this great looking addon but I cant get the dam thing to work :( I can get the date picker to work but not the addon can some one help me please before I go nuts.
jQuery UI Datepicker – Default functionality
$(function() {
$( “#datepicker” ).datepicker();
});
$(function() {
$( “#timepicker” ).timepicker();
});
Date:
Date:
GoneNuts
Jul 08, 2011Hi I tried to post my code but it will not post complete
trent
Jul 08, 2011Do you have the slider widget included in your jqueryui?
GoneNuts
Jul 08, 2011Thank You trent worked a teat didn’t mention about those scripts to be included in the docs thanks again
chandan
Jul 11, 2011I have used this plugin. Thanks
How to validate the start date Time and end date time. Please help me.
Gaboo
Jul 26, 2011Dear Trent,
I have an issue regarding the Timepicker under IE9 and Safari browsers.
The problem is that only the two buttons “Now” and “Done” appears in Timepicker area.
Note:
In IE7, IE8, FF, it appears as it should (included time display, hour and minute slider and picker)
My timepicker code looks like as follows:
$(‘#input_box’).timepicker({
ampm: false,
stepMinute: 5,
hourGrid: 4,
minuteGrid: 10,
onSelect: onSelectCallbackTo
});
Do you have any idea how to resolve this problem?
Any advice and solution are appreciated.
Thanks in advance.
Regards,
Gaboo
Christoph
Aug 03, 2011First of all: it is a great work. But I have a problem to integrate it in a Typo3 webpage. I don’t think it is a datetimepicker issue but I don’t find any hints to solve the following issue:
datetimepicker opens and everything can be selected. But if using the sliders to set hour and minute the slider won’t stop anymore. Even if the datetimepicker is closed the value of hour and/or minute will still change when moving the mouse. Only refreshing the page will quit this behaviour.
Any ideas?
Thx, Christoph
ProSmash
Sep 13, 2011Hi Trent, awesome work. I have the same question as Rishad (#97):
When I load my form, that includes the widget, and I already have a date and time for eg. 23-May-2011 09:00. Then I click on the calendar button which loads the datetimepicker and the calendar is set to the correct date, but the time slider is set to 00:00. Ideally, the time slider should have been at 09:00.
Is there a setting that I’m missing?
Is this posible to accomplish?
trent
Sep 18, 2011ProSmash,
Check to make sure your dateFormat and timeFormat options are exactly correct to match your date time
Shafaqat
Sep 19, 2011Hi
I am getting this error, please help
Object doesn’t support this property or method
I have included following files
“Scripts/jquery-1.6.1.js”
“http://trentrichardson.com/examples/timepicker/js/jquery-ui-timepicker-addon.js”
“jquery-ui-1.8.15.custom.min.js”
“jquery-ui-1.8.15.custom.css”
trent
Sep 19, 2011Are you sure you source is correctly linked to the source files? Sounds like something is missing..
trent
Sep 21, 2011Hey Shafaqat,
Be sure to include the jquery-ui before timepicker plugin
Troy
Oct 04, 2011I’m trying to use the default time feature and it isn’t setting is on the datetimepicker.
Here is my code:
$( “#check_in_datepicker” ).datetimepicker( {
dateFormat: ‘yy-mm-dd’,
ampm: true,
timeFormat: ‘hh:mm tt’,
hour: 10,
minute: 0,
beforeShow: customRange,
onSelect: function(dateText, inst) {
— more code
}
});
Any thoughts?
chris
Oct 05, 2011Love this and it works really well, however, I’m trying to set the maxDate property to a datetime on a dialog box that appears at during the course of entering some data – the maxDate needs to be reset to the current datetime each time the dialog appears but the only way I’ve managed to get this to work so far is by “destroying” the datetime element first and then resetting it’s maxDate option on re-initialisation.
Jadsadah mentioned this back in Feb and just wondered if you’d had a chance to look at this? The workaround “feels” wrong!
trent
Oct 07, 2011Have you tried this with the latest version relesed this week? (0.9.7)
sshport
Oct 30, 2011if i run this without params, like this: $(‘#example10′).timepicker();
it shows datatimepicker, to show timepicker i have to add at least one param $(‘#example10′).timepicker({hourGrid: 4});, why?
gaz
Nov 02, 2011how to add this in the html and code in C# pleast post the full script
ankur rai
Nov 02, 2011I am using a datetime range with a start and end date.
my problem is when i click my end datetime picker, after seleting startdatetime , in startdatetime textbox time is removing. please reply
my code is as fallows.
$(‘#example16_start’).datetimepicker({
onSelect: function (selectedDateTime){
var start = $(this).datetimepicker(‘getDate’);
$(‘#example16_end’).datetimepicker(‘option’, ‘minDate’, new Date(start.getTime()) );
}
});
$(‘#example16_end’).datetimepicker({
onSelect: function (selectedDateTime){
var end = $(this).datetimepicker(‘getDate’);
$(‘#example16_start’).datetimepicker(‘option’, ‘maxDate’, new Date(end.getTime()) );
}
});
dinu
Nov 15, 2011Hi
It is an awesome plugin and works perfectly for me.But i need a help of you.Is there any parameter for checking the start time and end time for the time picker or it should be called by using some callback functions. If you got any code regarding start time and end time,please provide me with the solution.
Thanks in advance.
Steve
Nov 28, 2011Bug in 0.9.7: using general styles for lists really screws things – I’m guessing the CSS needs to be better qualified/named. Try including this:
dl
{
border: 1px solid green;
padding: 0.5em;
width: 400px;
font-size: 16px;
}
dt
{
float: left;
clear: left;
width: 10px;
text-align: left;
font-weight: bold;
background: #339900;
color: white;
padding: 5px;
}
dt:after
{
content: “”;
}
dd
{
width: 370px;
margin: 0 0 0 20px;
padding: 5px 0 0.5em 10px;
}
Steve
Nov 28, 2011BTW, fantastic addon!
elarifr
Dec 06, 2011hello i have some issue using datetimepicker 0.98 from github + fr translation
the script
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
$(document).ready(function(){
$("#datimepicker").datetimepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 2,
defaultDate: 1,
firstDay: 1,
minDate: +1,
maxDate: '+1M +15D',
showAnim: 'slide',
regional: 'fr',
dateFormat: 'yy-mm-dd hh:mm',
altField: '#alternate-datime',
altFormat: 'DD, d MM, yy hh:mm',
timeFormat: 'hh:mm',
separator: 'T',
//hourMin: '7',
//hourMax: '13',
//showSecond: false,
hourGrid: 2,
minuteGrid: 30,
stepHour: 1,
stepMinute: 30,
stepSecond: 10
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 14, 2011], [11, 01, 2011]];
var closedDays = [[Monday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] - 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
Date de LivraisonSaisir la date comme AAAA-MM-JJ (exemple norme ISO 2011-10-24)
using only datepicker the field is ok and alternate field too
using datetimepicker
-time slide display 1 sec and hides and it does not appear until i select a day
-the alternate field only report the time hh:mm
-using dateFormat: ‘yy-mm-dd hh:mm’, report 2011-12-07 hh:12 => hh unknow and mm= month; time is ok alternate filed
-using dateFormat: ‘yy-mm-dd’, the field report date and time is reported on alternate
-removing dateFormat the input field report date 23/12/2011 and alternate the hours
- using hourmin & hourmax report an error
f is undefined
(function(a){a.widget(“ui.slider”,a.ex…,value:0,values:null}})})(jQuery);;/*
does datetimepicker handle the dateformat and alternate field ?
however it seems the mm is ambiguous
http://jqueryui.com/demos/datepicker/#date-formats report
ISO 8601 – yy-mm-dd use mm for month
elarifr
Dec 06, 2011oops seems code create some effect :(
/* css for timepicker */
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
$(document).ready(function(){
$(“#datimepicker”).datetimepicker({
beforeShowDay: nonWorkingDates,
numberOfMonths: 2,
defaultDate: 1,
firstDay: 1,
minDate: +1,
maxDate: ‘+1M +15D’,
showAnim: ‘slide’,
regional: ‘fr’,
dateFormat: ‘yy-mm-dd hh:mm’,
altField: ‘#alternate-datime’,
altFormat: ‘DD, d MM, yy hh:mm’,
timeFormat: ‘hh:mm’,
separator: ‘T’,
//hourMin: ’7′,
//hourMax: ’13′,
//showSecond: false,
hourGrid: 2,
minuteGrid: 30,
stepHour: 1,
stepMinute: 30,
stepSecond: 10
});
function nonWorkingDates(date){
var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
var closedDates = [[7, 14, 2011], [11, 01, 2011]];
var closedDays = [[Monday]];
for (var i = 0; i < closedDays.length; i++) {
if (day == closedDays[i][0]) {
return [false];
}
}
for (i = 0; i < closedDates.length; i++) {
if (date.getMonth() == closedDates[i][0] – 1 &&
date.getDate() == closedDates[i][1] &&
date.getFullYear() == closedDates[i][2]) {
return [false];
}
}
return [true];
}
});
Date de LivraisonSaisir la date comme AAAA-MM-JJ (exemple norme ISO 2011-10-24)
elarifr
Dec 07, 2011hi,
datetimepicker is really great addons. thanks for that
i have finally fixed some of my problems
- hourMin hourmMx was some ‘ added by template that i didn’t see :(
- alt date & time was ok by setting altFieldTimeOnly: false,
but still have
1/ time sliders shows one sec with provided value and disappear until i select a day
2/ alternate field use dateFormat timeFormat instead of altFormat
i have date: yy-mm-dd ; time hh:mm and i want alternate ‘DD, d MM, yy hh:mm’
is there a altDateTimeFormat ?
and now have a new mistake where time picker report date in input field and time in alt field :(
elarifr
trent
Dec 07, 2011Hey elarifr, currently there is no altTimeFormat. This could potentially be a future addition but nothing at the moment.
For #1 do you have your time formatted differently while generating the page? .. In other words does php or python format the time with the Seconds, but the timeFormat doesn’t specify seconds? Thus when the picker changes value it doesn’t generate a Second on the time.
keith
Dec 08, 2011This does look cool. Why do I not see anything other than a datepicker? Do I have all the write includes?
script type=”text/javascript” src=”scripts/jquery-1.7.1.js”>
script type=”text/javascript” src=”scripts/jquery-ui-1.8.16.custom.min.js”>
script type=”text/javascript” src=”scripts/jquery.ui.core.js”>
script type=”text/javascript” src=”scripts/jquery-ui-timepicker-addon.js”>
script type=”text/javascript” src=”scripts/jquery.ui.slider.js”>
elarifr
Dec 09, 2011hi trent
i do not use second but i understand that it should be the issue.
thank for this answer.
for instance i have removed the datetime feature and use separate date & time that works very well as i must finish this work asap
after i will go back on using datetime and will check again what happens
elarifr
trent
Dec 09, 2011Keith,
You should only need jquery, jquery-ui-1.8.16.custom.min.js, and timepicker-addon. Your jquery-ui-1.8.16.custom.min.js should already have included the datepicker and slider. Then, instead of calling $(‘#selector’).datepicker() you should use datetimepicker() or timepicker()
Justin
Dec 18, 2011Hi Trent – thanks for the work on the plugin. I’m using the latest version and for some reason I am not able to see the time slider, only the calendar and the “Now” button (which does work).
I have included your CSS, and am importing the following javascript files:
This is the code that initializes the datetimepicker:
td.find(‘#dateinput’).each(function(){
jQuery(this).datetimepicker();
});
I have a screenshot of the output here – http://grab.by/bqj7 – any ideas?
Thanks!
Justin
Justin
Dec 18, 2011Oops, lost my javascript imports in the comment:
script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js’
script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js’
script type=’text/javascript’ src=’/js/jquery-ui-timepicker-addon.js’
trent
Dec 18, 2011Hey Justin,
Does that cdn provide the slider widget and CSS for the slider? Do you get any errors?
testa
Jan 13, 2012$(‘#id’).timepicker({});
//Now how can i unbind/remove/hide the timepicker in routine?
Thanks!
Jo
Jan 19, 2012Hi, I made a post here yesterday that was incorrectly identified as spam – can you please fish it out?!
fatih
Jan 21, 2012Hi !
firstly thank you for this add on. it works great but i have some problem when i use this add on inline mode.
$.datetimepicker.(“getDate”) returns like this :
Sun Jan 29 12:00:00 UTC+0900 2012 in IE8.
Sun Jan 29 2012 12:00:00 GMT+0900 (Korea Standard Time) in Chrome and Firefox browser.
i think something is wrong in my code part. how can i get this format 29-01-2012 12:00:00 ?
my code is like this :
$(function() {
$( “#datepicker” ).datetimepicker({
dateFormat: ‘yy-mm-dd’,
timeFormat: ‘hh:mm:ss’,
inline: true,
showWeek: true,
showTime: true,
firstDay: 1,
numberOfMonths: 3,
//showButtonPanel: true,
hour: 12,
minute: 00,
stepMinute: 15,
hourGrid: 1,
minuteGrid: 15,
ampm: false,
onSelect: function(selectedDateTime){
var seldate=$(this).datetimepicker(‘getDate’);
document.getElementById(‘sdate’).value = seldate;
}
});
});
Thank you again for this great add on…
fatih
Jan 21, 2012Hi again,
I found a solution.I just changed this line
document.getElementById(‘sdate’).value = selectedDateTime;
it works but i have a new problem about add time.I want to add time on current selectedDateTime.
example : 29-01-2012 12:00:00 + 1 hour 45 minutes. and i want to get this result 29-01-2012 13:45:00
is there any function for do this?
trent
Jan 22, 2012faith,
On your first comment it appears you were trying to use the Date object as a string. The different browsers were converting the Date object to a string differently. Take a look at example 15 on the docs, the formatted DateTime string is passed to the onSelect option:
http://trentrichardson.com/examples/timepicker/
For the second question to add to a date have a look at this article:
http://trentrichardson.com/2011/09/27/better-javascript-date-add-and-diff/
fatih
Jan 23, 2012thank you trent…
finally i found a solution.
fatih
Jan 23, 2012Hi..
I have a new problem.I need to set mindate from now (example : 2012-01-23 19:47:00).but Minute bar doesn’t refresh when i use mindate option.
example : NOW 2012-01-23 19:47:00 and minute grid and steps are 5.hour bar shows 20-21-22-23 and minute bar show 52-57. but problem is when i changed hour bar value to next hours, minute bar grids and steps are still same.it shows 52-57.it should be 0-5-10-15-20-….55 for next hours (20-21-22-23).
How can i find a solution?
Thank you…
michele
Feb 02, 2012Hello! Great Addon!
There is only a lack! the ALTFORMAT support!
Is very very important for me!
Is there a workaround for this? Maybe format the date before to insert in the altfield?
Sorry for my english!
trent
Feb 03, 2012Some planning has been in the works for this option but it does not exist yet, sorry..
t.nition
Feb 05, 2012Couldnt agree more, awesome addon, great work there. The only thing keeping me from using it is the altformat support!
Joe
Feb 21, 2012I love this add on and it works flawlessly for me on one site. I am attempting to now use it on a CakePHP project and it doesn’t want to play along. It appears directly below the input field automatically (not hidden to start), the slider widths are tiny so there is really no sliding feature, and once selected the input field does not update. Anyone else try to use this with Cake? Thanks!
Joe
Feb 22, 2012The issue was that I manually created the cake form field and set the properties for div and not class. Made this change and the functionality returned (although the css is still off).
Web designing company mumbai
Mar 17, 2012thanks
Mark
Mar 28, 2012We’ve noticed that the datetimepicker control has stopped working with firefox 11. Any thoughts on how to tweak it, or a possible new release? Thanks.
Josh
Apr 02, 2012This is a great add-on. Thanks Trent. I am seeing a formatting issue with the timepicker when a stepMinute other than 1 is specified, and the time is typed in. If the user begins to enter a minute value that is not a multiple of the stepMinute the formatter automatically changes the value to something undesired. For example, if the stepMinute value is 5 and a user begins to type 11:3 the formatter formats before the next number can be typed and makes the value 11:05 AM instead of the desired value of 11:30 AM. Any ideas aside from making the field read-only? I need to allow users the option to type in values in addition to using the picker.
Thanks!
Bhargavisri
Apr 22, 2012sorry, for me time picker is not working… i included the js file in the script type..
then i dont how to put css coding… kindly anyone help me…
Abhishek
Apr 29, 2012I am using this great plugin but while using this I do face some problem
1)am comes instead of AM
2)While selecting a date,date shown is corrected,but time shown is not same as current time.
There is a page say A.js where I’ve imported this plugin.When a pop up box is opened and date is selected time comes of page loading not of pop up opening.
3)When I close the calendar and reopen,all previous selected values doesn’t clear off.
Please tell me if I am doing something wrong or is there any issue with this plugin.I’ve used following properties.
changeMonth:true,
changeYear:true,
animate: “slide”,
dateFormat: “mm/dd/yy”,
ampm: true,
minDate: 0,
Thanks in advance
Chiru bhatt
May 02, 2012I am trying to use datetimepicker plugin into the cakephp. here is my code included. the core file of jquery has support of datepicker and slider. I am able to use the datepicker with
$(function() { $( “#EventStartTime” ).datepicker(); });
Not able to use this as
$(function() { $( “#EventStartTime” ).datetimepicker(); });
I have included the js in this order
echo $javascript->link(‘jquery-1.7.2.min’);
echo $javascript->link(‘ui/jquery.ui.core’);
echo $javascript->link(‘ui/jquery.ui.widget’);
//echo $javascript->link(‘ui/jquery.ui.datepicker’);
echo $javascript->link(‘ui/jquery.ui.timepicker’);
getting error onclick of date field
SCRIPT438: Object doesn’t support property or method ‘slider’
trent
May 02, 2012Hey Chiru, Sounds like you also need to include jquery-ui slider
Michael
May 04, 2012Hi trent,
Thanks for such a nice plugin.This plugin is working greatly except issue as described below.
1)Whenever textfield is empty and I select any value from Calendar it populates text field with correct date and time i.e. 4/4/12 07.45 AM.But if there is some pre populated value in textfield and I select a value from calendar it changes value of Month/Year and date correctly but time always comes as 12.00 AM.Is there any thing I am missing?
2)Even when time is populated correctly(when textfield is empty) the time comes up is same of pop up which might not be same of current time.
Is it possible that whenever I select a date in calendar any “existing value in textfield is modified accordingly” and “time shown is of system current time”?
Would appreciate your help.
And thanks a lot for such a great and helpful plugin.
Michael
May 04, 2012I forgot to mention what settings I am using.Its is as mentioned below.
showOn: “button”,
buttonImage: “images/calendar-Widget.gif”,
buttonImageOnly:true,
changeMonth:true,
changeYear:true,
changeHour:true,
changeMinute:true,
animate: “slide”,
dateFormat:’mm/dd/yy’,
timeFormat:’hh:mm TT’,
minDate:0,
ampm: true,
onSelect: function(dateText, inst){
if(window.console)
console.log(dateText);}
trent
May 04, 2012Doesn’t look like your time format matches. The timeFormat determines how to read in and write out the time. So 12.00 AM will not be parsed by “hh:mm TT” (the colon, not a period). Hope that works
Michael
May 07, 2012Thanks for the reply.Sorry for the typo mistake.It was 12:00 AM actually.Any clue for that?
Geek
May 08, 2012Hi trent,
I’ve set “showButtonPanel : false” and I want that after every selection of date from calendar Current time is set in textfield(and date would be as selected). Is there any setting for this?I am using dateFormat:’mm/dd/yy’,timeFormat:’hh:mm TT’…
Guy L
May 18, 2012Great job on the timepicker, but I have one problem, I am using it with data from a model and it somehow does not work, the date is always December 31, 1899 I need to be either todays date if there is no value or the value in the model.data, I do need help with this, thanks in advance.
Kent
May 28, 2012Hi Trent , how to use datetimepicker addon in cakephp ???
here my code : View
$(document).ready(function(){
$(‘#time1′).datetimepicker();
$(‘#time2′).datetimepicker();
});
default.ctp
echo $this->Html->script(‘jquery-ui-timepicker-addon’);
Please help me !
john doe
Jun 07, 2012hi trent,
is there a way to use the server date instead of the user’s computer date as the default current date?
trent
Jun 08, 2012If you’re using the server date just use you serverside(php, python, etc) language to print the time into the textbox.
JBravo
Jul 27, 2012Hi Trent,
I found your plugin to be a very elgant solution to a date and time picker. However my problem is that the slider handle is not visible. If I drag the mouse over the slider it changes the time. All other functionality is there, just that the slider handle cannot be seen.
Any suugestions what might be causing this problem?
trent
Jul 30, 2012Do you have an updated version of jqueryui? Also you may have to check through your site’s css and look for any conflicting selectors
Kathryn Verdoorn
Aug 30, 2012Any ETA on when this awesome control will be able to handle time format in altFormat?
trent
Aug 31, 2012Grab from the dev branch on Github, we have had some recent changes for alt time format.
Chris
Sep 05, 2012This no longer works with jquery-ui 1.8.23, is there an update? The timepicker portion doesn’t show up at all any more :)
Adam
Sep 12, 2012Any way to make the “current date and time” the cut off mark for disabled date/time selection? As in, when a user clicks the field to set a date, it takes into consideration both the time of day and the calendar day to determine what the calendar can be set to? I want to use a task/reminder calendar on my website and I cannot find a way to make the calendar not accept dates previous to “right now”. The only thing I can do is make dates previous to today disabled, or min/hour previous to the current time disabled, which also disables those hours/minutes when picking a future day like tomorrow. Again, I just want to use the system time of “right now” to allow the user to select ANY future time or date, but NOT be able to select ANY PAST time or date. Thanks!
prashantchalise
Sep 20, 2012Hi,
Thanks for the great plugin!!
I have one small issue with timepicker (excluding date) where on focus a default value of “12:00 AM” is set automatically to the textbox.
My code is:
$(function () { $('#').timepicker({ ampm: true}); });After I foucs the textbox “txtDropTime”, a default value of “12:00 AM” is set in it. Any suggestions what might be causing this?
Again, many many thanks for this great plugin !!
trent
Sep 20, 2012Try grabbing from the dev branch, I believe this is fixed there.
akash
Sep 29, 2012Nice one i like it .
Very Helpful in my project :)
Emage
Oct 15, 2012First, I like this addon and it perfectly fits my needs.
But I have a problem with the sliders.
After moving a slider it das not stop moving and follows the mouse movement.
Even after closing the picker the time will change when moving the mouse.
I read about the same issue some posts earlier and tried some of the hints mentioned there but nothing helped.
As additional information:
- jQuery 1.8.2
- jquery-ui 1.8.24
- jQuery UI Slider Access 0.2
- jQuery timepicker addon 1.0.5
Emage
Oct 15, 2012Sorry for double positng but I could not find any edit function.
After restarting firefox the problem disappeared.
Renee
Oct 18, 2012What is the 24hour time format?
Ayyappa
Oct 30, 2012Only allow ‘Minutes’ selection line to select in 15 minute increments..i.e (0, 15, 30, 45).
trent
Oct 30, 2012set the following options:
showHour: false,
stepMinute: 15
Arif Usman
Nov 24, 2012This add-on is not working for me. It didn’t give any error but also didn’t show anything..
Following is my code for datetimepicker:
application.js
————–
//= require jquery
//= require jquery_ujs
//= require jquery-ui
_form.html.erb
—————
$(function() {
$(“#scheduling_csv”).datetimepicker();
});
“scheduling_csv”, :size => “6″ %>
I have added jquery-ui-timepicker-addon.js and jquery-ui-sliderAccess.js file in my javascript folder
trent
Nov 25, 2012Arif Usman, Be sure the timepicker and sliderAccess plugins are not only in your js folder, but also included in the page.
Arif Usman
Nov 25, 2012I have included that in my page. See these codes:
_form.html.erb
—————-
stylesheet_link_tag “http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css”, “application”
$(function() {
$(“#scheduling_csv”).datetimepicker(
});
“scheduling_csv” %>
Even I have installed jquery-slider-rails gem along with date picker, still no luck….
Gemfile
——–
gem ‘jquery_datepicker’
gem ‘jquery-sliders-rails’
Arif Usman
Nov 25, 2012_form.html.erb
————–
src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”
src=”https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js”>
src=”jquery-ui-timepicker-addon.js” type=”text/javascript”>
priya
Jan 04, 2013Hi Trent,
I used your date picker and it is damn good. But i have a peculiar issue. i associated the date time picker to a text box. In IE and firefox it works fine. The calendar shows up when i click the text box. But in chrome the calendar shows up on the top left corner of the page right after the page gets loaded itself. when i click the textbox it disappears from top and displays again below my text box(this s how it behaves normally). Do we have any special