Bug fixes and improved timezone support has been brewing for a while, and it is here with jQuery Timepicker Addon version 1.0.1.
A quick overview of the changes include:
- Bug fix for empty field
- Bug fix for setTime
- Added localization for Afrikaans language
- JSLint compatibility changes
- Add $.datepicker.parseDateTime() and $.datepicker.parseTime() methods
- Many timezone improvements and bugfixes
Also for your convenience there is now a copy of the documentation in the repository to make it easier to maintain.
Get it here: jQuery Timepicker Addon.
50 Responses
Daniel
Jul 05, 2012Hey, how do I obtain the selected value if I only use the TimePicker?
Arjan
Jul 06, 2012Hi Trent,
I’ve been working with the addon a while now, and I noticed a bug which I couldn’t solve yet myself. I hope you can help me.
I made a google forms like form builder. When I statically add form content and bind time and datetime pickers on page load it works like a charm. However, when I than dynamically add another question a copy of a hidden one (without bound events and data) is made and than a picker is added to the inputs (using text inputs). Then when I add a question using time picker followed by a question using datetime, the datetimepicker is, within the addon itself, mixed up with the time picker (and the other way round if the order is different). So what happens is that I’ll get a time picker while I expected a datetime.
Lots of checks show me and other who looked at it’s not likely to be a fault in my own code.
Are you familiar with the problem, or know how to fix it?
Thanks in advance!
Sincerely,
Arjan
trent
Jul 08, 2012Daniel,
Only using timepicker works exactly the same as using both date and time pickers. You can use the onselect event(it is passed in there) or use the getDate method: $(‘#myel’).datetimepicker(‘getDate’); There is an example of this in the documentation.
Arjan,
I am not familiar with this issue. A couple thoughts though. When you add new form fields do they have the same id attribute? Are you using inline datetimepicker? I have had one other user report an issue with multiple inline datetimepickers. I may need to investigate that further if you are using inline as well.
Lucas
Jul 11, 2012Love the datetimepicker. I’m having a grand time wrapping it in an ASP.Net control for server-side setup, i18n, validation, and parsing.
I’ve got one odd use case, and I was hoping you could advise whether there’s an easy way to satisfy it. In one situation I want both date and time entered, and the default will be preset to the current date and time. If the user chooses a new date, the time part should reset to midnight. This way if they do not explicitly choose a new time (which they often wouldn’t know; this is for the time a payment was manually received), the resulting data makes that fact semi-obvious. Any way to do this without writing new hacks into both the original datepicker and the timepicker?
Laura
Jul 13, 2012Great work.
I am trying to use your add on but I noticed that when we use the second version of your examples; the one that allows you to add the “AM/PM 12 hour format”, it has an error to it.
When you select the “Now” button and it is before noon (so am) the timepicker keeps selecting pm and puts that in as a value. Is that an easy fix for you?
Bojan
Jul 14, 2012Is it possible to use it with Contact Form 7 (WordPress plugin), and if it is, HOW???
thank you very very much
Arjan
Jul 18, 2012Hi Trent,
thanks for your reaction! And excuse me for my late response, I was fortunate enough to have a nice vacation in the mean time :). Here are some answers on your questions.
When you add new form fields do they have the same id attribute?
> No they get their own ones (like id=”form_80_start”, with “form” being the application indicator, “80″ being the question id and “start” the role within the question)
Are you using inline datetimepicker?
> No, it pops up when you click the input (type=”text”)
The HTML of the input field to be specific:
The Javascript is kind of simple: cloning a HTML block which is hidden (using just clone(), so without events and data), replacing stuff like ids, names… and then binding your (date)timepicker with localization options, a beforeShow to init ranges and stuff and a onClose to do some range and value checks.
Thanks again!
Sincerely,
Arjan
Arjan
Jul 18, 2012Stripped out HTML:
<input id=”form_81_end” class=”form_datetime form_input form_datetime_end form_datetime_picker form_hidable form_hide hasDatepicker” type=”text” value=”" max=”05-01-2012 16:00″ min=”01-01-2012 04:00″ placeholder=”dd-mm-jjjj uu:mm” name=”form_81_end”>
Arjan
Jul 18, 2012… and the hasDatepicker class is applied while initializing your datetime picker. It is not there before it is applied.
vinay
Jul 24, 2012in the above link example 8 does not worrking properly by clicking on now button in time picker
vinay
Jul 25, 2012http://trentrichardson.com/examples/timepicker/
in the above link example 8 does not worrking properly by clicking on now button in time picker
Cleyton Bruno
Jul 26, 2012I have the same problem as Arjan. I’m adding inputs dynamically (but I’m not cloning them) and I call timepicker in one. This is ok. When I create a second one, I call datetimepicker but I’m getting a timepicker. I noticed that, if I remove, when adding the first input (timepicker), the setDate call, the second input (datetimepicker) will show correctly.
Cleyton Bruno
Jul 26, 2012Noticed that, if I append the input to the HTML before calling datetimepicker, everything works. If I try (that’s what I was doing) to use datetimepicker in an element that is still only in memory, we get this strange behavior.
Arjan
Jul 26, 2012Hi Cleyton,
thanks for posting your findings. I will play some more with the script to get the cloning right. Unfortunately, in my case i first clone, than replace some ids, than add to the DOM and after that I bind the pickers. So it won’t help for me, but still it gives some material to play around with! Thanks for that.
Of course I still hope that Trent will look into it!
Sincerely,
Arjan
Cleyton Bruno
Jul 26, 2012Hi Arjan,
Yes, you’re right… It works for me just the first time (it’s a jquery dialog). If I close the dialog (removing it, so there’s no chance I would repeat the id) I still get the error…
trent
Jul 27, 2012Are you using the latest timepicker? Try using the dev branch from github:
https://github.com/trentrichardson/jQuery-Timepicker-Addon/tree/dev
The latest dev version no longer uses id’s, classes only. This may fix the problem..
Cleyton Bruno
Jul 27, 2012Seems like it’s ok now… I can’t believe it was the id! I’m sure it was not repeated… Well, this proves I’m wrong.
Thanks trent!
Arjan
Jul 27, 2012Hi Trent,
after some quick tests with the code from the dev branch I too got positive results! I’m only left now with some errors in the format checks, but I’m sure that’s one of my own faults I can fix.
Thanks for helping.
Sincerely,
Arjan
ncramer
Jul 28, 2012@Laura #5
I had the same issue. There’s an inconsistency in the defaults.
Default time format for 12/24 is hh:ss tt (lowercase am/pm).
However, the lowercase am/pm is compared as a string against the amNames/pmNames which default to uppercase AM/PM, so it always fails.
Simple work-around, if you want uppercase AM/PM, set the default:
'timeFormat'=>'hh:mm TT',
*OR* If you want lowercase am/pm, set the defaults:
'amNames'=> array('am', 'a'),
'pmNames'=> array('pm', 'p'),
Issue raised:
https://github.com/trentrichardson/jQuery-Timepicker-Addon/issues/396
Arjan
Jul 30, 2012Hi Trent,
as given in my previous post, using the dev version of 27-07, there still were some problems left. I just did some more extensive tests. These result that I still can’t fix the next problem: when i use both time and datetime in the same environment as described before, your script changes the value of the field somewhere right after beforeShow and before the first user interaction moment from for instance ’00:00′ to ‘aN:00′ in the case of a timepicker.
Remarkably this only happens to new added fields in the case I add a timepicker when a dynamically added datetimepicker is already added. The last line of beforeShow says for instance that the field value is ’00:00′. As soon as the timepicker box shows up, this has changed to ‘aN:00′. As soon as this happened the same thing happens to the datetimepicker fields (’30-07-2012 00:00′ -> ’30-07-2012 aN:00′).
All instances that already exist before this occurs remain working like they should. So when I add a timepicker, another timepicker, datetimepicker, another datetimepicker, followed by a timepicker and a datetimepicker, than the first four fields work and the last two get these NaNs. :( This all also only goes for dynamically added fields, which means that if PHP generates a part of the form containing these combinations, it also just works.
Sincerely,
Arjan
trent
Jul 30, 2012When you attach the datetime/timepicker to the dynamic elements do you attach to them specifically? Or does it re-attach to all those elements? ex:
$(".timepicker").timepicker(); // all timepickers$("#timpicker12").timepicker(); // individual timepicker
Do the newly generated elements have unique id’s? That _shouldn’t_ matter if they don’t have id’s, but it could help pinpoint the problem in timepicker.
Martin
Aug 02, 2012Hello, this addon is great! i’m using it and i found it very interesting. However, i had a problem in IE 8.0 when i clic de button ‘Now’. The problem is that the lines looses the height definition and the control look not as nice as when i get started. i think it is a style problem.
If someone has go ahead this problem…how can i do to solve it on my own?
Thanks in advance
Martin
Juni
Aug 02, 2012Hi Trent,
I noticed in your “ampm: true” example, when you click on a day in the calendar, it sets the displayed date above the slider to pm even though it was initially am and the date in the textbox is still am.
Can this be set so it keeps the existing tt?
Thanks
Arjan
Aug 03, 2012Hi Trent,
thanks for your reaction.
The elements have unique id’s in the form of ‘form_81_start’, where the ’81′ can be any question id and the ‘start’ defines the role within the question. Therefore the combination of those gives an unique id for all elements.
it is like
clone.appendTo( list );var added = $('ul.form_editor_sortable_list').find('div#question_new_' + form_new_count);
//... (some stuff)
if( type == 'time' ){
$(added).find('input.form_editor_input_time').each(function(){
bind_editor_time_picker( this );
});
$(added).find('input.form_time_picker').each(function(){
bind_time_picker( this );
});
}
and then i use functions that put specific options and stuff into the date and time pickers that are similar this one
function bind_time_picker( obj ){var options = {
//... (options and stuff)
};
$(obj).datetimepicker(options);
}
I hope this explains something…
Sincerely,
Arjan
Arjan
Aug 03, 2012oh, i noticed the bind_time_picker( obj ) has an $(obj).datetimepicker(options) in it.. that’s bad copy&paste work :l
trent
Aug 03, 2012Juni, grab the dev version from github, it is fixed there (it will be made the stable version soon)
Arjan, at first glance it looks like that would work. What are your options being set to?
Martin, sounds like a style issue, I would start with firebug or style inspector to see where you have conflicting styles. It could be your site’s custom styles bleeding through.
Manmohan
Aug 04, 2012hi trent , am relatively a newbie in jquery so would its would be a great help if you could give a solution,
$(“#AddRow”).click(function() {
var row = ” + ” + ” + ” + ” + ‘delete’ + ”;
$(“#table”).append(row);
});
$(‘body’).on(‘focus’, “.timepicker1″, function() {
$(this).timepicker({ timeOnly: true});
});
$(‘body’).on(‘focus’, “.timepicker2″, function() {
$(this).timepicker({ timeOnly: true});
});
$(“#table”).on(“click”, “button”, function() {
$(this).closest(“tr”).remove();
});
am able to generate time difference for the first row if i change class as id and call javascript code onclick which calculates time difference. trouble is how to call it when appending new row . is there any method to calculate time time difference from class name ?
Manmohan
Aug 04, 2012the row which am appending is this ”
delete
“
Manmohan
Aug 04, 2012pls check this fiddle , i have not included time difference javascript in it …
http://jsfiddle.net/manmohan_menon/QRnFM/1/
btw last time i was trying to past the html tag attribut without reading the instruction bleow .Sorry :)
Arjan
Aug 06, 2012Hi Trent,
as requested I have put the options objects below. the bind_editor_(date|time|datetime)_picker functions are for the field config fields. They just set a valid range. THe bind_(date|time|datetime)_picker functions are used for a preview of what the front-end input will look like. It therefore updates its range to what the config fields are set to. As the front-end can be a range or a stand-alone date, some code is there switch between which field to take as as min|max boundary.
I hope it’s useful.
Thanks in advance again! I really appreciate it!
Sincerely,
Arjan
Min/max fields to config the front-end time picker
function bind_editor_time_picker( obj ){
var options = {
timeFormat: 'hh:mm',
timeOnlyTitle: 'Kies Tijd',
timeOnly: true,
timeText: 'Tijd',
hourText: 'Uur',
minuteText: 'Min',
secondText: 'Sec',
millisecText: 'Ms',
currentText: 'Nu',
closeText: 'Klaar',
ampm: false,
beforeShow: function(){
console.log( $(obj).val() );
},
onClose: function(){
var name = $(obj).attr('name');
if( name.indexOf( '_from' ) >= 0 ){
var from = $(obj);
var to = $('input[name="' + name.replace('_from','_to' ) + '"]' );
var mode = 'from';
} else {
var from = $('input[name="' + name.replace('_to','_from' ) + '"]' );
var to = $(obj);
var mode = 'to';
}
var from_t = from.val().split(':');
var to_t = to.val().split(':');
from_d = new Date( 0, 0, 0, from_t[0], from_t[1] );
to_d = new Date( 0, 0, 0, to_t[0], to_t[1] );
if( from_d > to_d ){
if( mode == 'from' ){
to_d = from_d;
} else {
from_d = to_d;
}
}
$(from).val( from_d.getHours().toString().pad(2,'0') + ':' + from_d.getMinutes().toString().pad(2,'0') );
$(to).val( to_d.getHours().toString().pad(2,'0') + ':' + to_d.getMinutes().toString().pad(2,'0') );
}
};
$(obj).timepicker(options);
}
Time picker front-end field(s)
function bind_time_picker( obj ){
var options = {
timeFormat: 'hh:mm',
timeOnlyTitle: 'Kies Tijd',
timeOnly: true,
timeText: 'Tijd',
hourText: 'Uur',
minuteText: 'Minuut',
secondText: 'Sec',
millisecText: 'Ms',
currentText: 'Nu',
closeText: 'Klaar',
ampm: false,
onClose: function(){
if( $(obj).val() && $(obj).val() != $(obj).attr('placeholder') ) {
var name = $(obj).attr('name');
if( name.indexOf( '_start' ) >= 0 ){
var start = $(obj);
var end= $('input[name="' + name.replace('_start','_end' ) + '"]' );
var mode = 'start';
} else if( name.indexOf( '_end' ) >= 0 ) {
var start = $('input[name="' + name.replace('_end','_start' ) + '"]' );
var end= $(obj);
var mode = 'end';
} else {
var mode = 'standalone';
}
var obj_t = $(obj).val().split(':');
var obj_d = new Date( 0,0,0, parseInt(obj_t[0],10), parseInt(obj_t[1],10) );
var minval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_from').replace('_end','_from').replace('form_','time_') +'"]' ).val();
var maxval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_to').replace('_end','_to').replace('form_','time_') +'"]' ).val();
if( minval != '' ){
var obj_min_t = minval.split( ':' );
var obj_min_d = new Date( 0,0,0, parseInt(obj_min_t[0],10), parseInt(obj_min_t[1],10) );
if( obj_min_d > obj_d ){
obj_d = obj_min_d;
}
}
if( maxval != '' ){
var obj_max_t = maxval.split( ':' );
var obj_max_d = new Date( 0,0,0, parseInt(obj_max_t[0],10), parseInt(obj_max_t[1],10) );
if( obj_d > obj_max_d ){
obj_d = obj_max_d;
}
}
$(obj).val( obj_d.getHours().toString().pad(2,'0') + ':' + obj_d.getMinutes().toString().pad( 2, '0' ));
if( mode != 'standalone' && start.val() && start.val() != start.attr('placeholder') && end.val() && end.val() != end.attr('placeholder') ) {
var start_t= start.val().split(':');
var end_t = end.val().split(':');
var start_d = new Date( 0,0,0, parseInt(start_t[0],10), parseInt(start_t[1],10) );
var end_d = new Date( 0,0,0, parseInt(end_t[0],10), parseInt(end_t[1],10) );
if( start_d > end_d ){
if( mode == 'start' ){
end_d = start_d;
} else {
start_d = end_d;
}
}
$(start).val( start_d.getHours().toString().pad(2,'0') + ':' + start_d.getMinutes().toString().pad( 2, '0' ) );
$(end).val( end_d.getHours().toString().pad(2,'0') + ':' + end_d.getMinutes().toString().pad( 2, '0' ) );
}
}
}
};
$(obj).timepicker(options);
}
Min/max fields to config the front-end datetime picker
function bind_editor_datetime_picker( obj ){
var options = {
timeFormat: 'hh:mm',
separator: ' ',
timeOnly: false,
timeText: 'Tijd',
hourText: 'Uur',
minuteText: 'Min',
secondText: 'Sec',
millisecText: 'Ms',
currentText: 'Nu',
closeText: 'Klaar',
ampm: false,
monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni','juli', 'augustus', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun','jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
weekHeader: 'Wk',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
beforeShow: function() {
var copy = $(obj).val();
var time = $(obj).val().split(' ');
var name = $(obj).attr('name');
if( name.indexOf( '_from' ) >= 0 ){
var to = $('input[name="' + name.replace('_from','_to' ) + '"]' );
if( to.val() != '' && to.val() != to.attr('placeholder' ) ){
$(obj).datetimepicker("option","maxDate",to.val() );
}
} else {
var from = $('input[name="' + name.replace('_to','_from' ) + '"]' );
if( from.val() != '' && from.val() != from.attr('placeholder') ){
$(obj).datetimepicker("option","minDate",from.val() );
}
}
$(obj).val(copy);
},
onClose: function(){
var name = $(obj).attr('name');
if( name.indexOf( '_from' ) >= 0 ){
var from = $(obj);
var to = $('input[name="' + name.replace('_from','_to' ) + '"]' );
var mode = 'from';
} else {
var from = $('input[name="' + name.replace('_to','_from' ) + '"]' );
var to = $(obj);
var mode = 'to';
}
console.log( $(obj).val() );
var from_t = from.val().split(' ');
from_t[0] = from_t[0].split('-');
from_t[1] = from_t[1].split(':');
var to_t = to.val().split(' ');
to_t[0] = to_t[0].split('-');
to_t[1] = to_t[1].split(':');
console.log( 'from_t: ' + from_t + ' transforms into ' + parseInt(from_t[1][0],10).toString() );
from_d = new Date( parseInt( from_t[0][2],10), parseInt(from_t[0][1],10)-1, parseInt(from_t[0][0],10), parseInt(from_t[1][0],10), parseInt(from_t[1][1],10) );
to_d = new Date( parseInt(to_t[0][2],10), parseInt(to_t[0][1],10)-1, parseInt(to_t[0][0],10), parseInt( to_t[1][0],10) ,parseInt( to_t[1][1],10) );
if( from_d > to_d ){
if( mode == 'from' ){
to_d = from_d;
} else {
from_d = to_d;
}
}
$(from).val( from_d.getDate().toString().pad(2,'0') + '-' + (from_d.getMonth()+1).toString().pad(2,'0') + '-' + from_d.getFullYear() + ' ' + from_d.getHours().toString().pad(2,'0') + ':' + from_d.getMinutes().toString().pad(2,'0') );
$(to).val( to_d.getDate().toString().pad(2,'0') + '-' + (to_d.getMonth()+1).toString().pad(2,'0') + '-' + to_d.getFullYear() + ' ' + to_d.getHours().toString().pad(2,'0') + ':' + to_d.getMinutes().toString().pad(2,'0') );
console.log( 'onClose End: '+ $(obj).val() );
}
};
$(obj).datetimepicker(options);
}
Datetime picker front-end field(s)
function bind_datetime_picker( obj ){
var options = {
timeOnly: false,
timeFormat: 'hh:mm',
separator: ' ',
timeText: 'Tijd',
hourText: 'Uur',
minuteText: 'Min',
secondText: 'Sec',
millisecText: 'Ms',
currentText: 'Nu',
closeText: 'Klaar',
ampm: false,
monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni','juli', 'augustus', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun','jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
weekHeader: 'Wk',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
beforeShow: function() {
var minval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_from').replace('_end','_from').replace('form_','datetime_') +'"]' ).val();
var maxval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_to').replace('_end','_to').replace('form_','datetime_') +'"]' ).val();
if( minval ){
$(obj).datetimepicker( "option","minDate", minval );
}
if( maxval ){
$(obj).datetimepicker( "option","maxDate", maxval );
}
var name = $(obj).attr('name');
if( $(obj).hasClass('form_datetime_start') ){
var end = $('input[name="' + name.replace('_start','_end' ) + '"]' ).val();
if( end ){
$(obj).datetimepicker("option","maxDate",end );
}
} else if( $(obj).hasClass( 'form_datetime_end' ) ) {
var start = $('input[name="' + name.replace('_end','_start' ) + '"]' ).val();
if( start != '' ){
$(obj).datetimepicker("option","minDate",start );
}
}
},
onClose: function(){
if( $(obj).val() && $(obj).val() != $(obj).attr('placeholder') ) {
var name = $(obj).attr('name');
if( name.indexOf( '_start' ) >= 0 ){
var start = $(obj);
var end= $('input[name="' + name.replace('_start','_end' ) + '"]' );
var mode = 'start';
} else if( name.indexOf( '_end' ) >= 0 ) {
var start = $('input[name="' + name.replace('_end','_start' ) + '"]' );
var end= $(obj);
var mode = 'end';
} else {
var mode = 'standalone';
}
var obj_t = $(obj).val().split(' ');
obj_t[0] = obj_t[0].split('-');
obj_t[1] = obj_t[1].split(':');
var obj_d = new Date( parseInt( obj_t[0][2],10), parseInt(obj_t[0][1],10)-1, parseInt(obj_t[0][0],10), parseInt(obj_t[1][0],10), parseInt(obj_t[1][1],10) );
var minval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_from').replace('_end','_from').replace('form_','datetime_') +'"]' ).val();
var maxval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_to').replace('_end','_to').replace('form_','datetime_') +'"]' ).val();
if( minval ){
var obj_min_t = minval.split( ' ' );
obj_min_t[0] = obj_min_t[0].split('-');
obj_min_t[1] = obj_min_t[1].split(':');
var obj_min_d = new Date( parseInt( obj_min_t[0][2],10), parseInt(obj_min_t[0][1],10)-1, parseInt(obj_min_t[0][0],10), parseInt(obj_min_t[1][0],10), parseInt(obj_min_t[1][1],10) );
if( obj_min_d > obj_d ){
obj_d = obj_min_d;
}
}
if( maxval ){
var obj_max_t = maxval.split( ' ' );
obj_max_t[0] = obj_max_t[0].split('-');
obj_max_t[1] = obj_max_t[1].split(':');
var obj_max_d = new Date( parseInt( obj_max_t[0][2],10), parseInt(obj_max_t[0][1],10)-1, parseInt(obj_max_t[0][0],10), parseInt(obj_max_t[1][0],10), parseInt(obj_max_t[1][1],10) );
if( obj_d > obj_max_d ){
obj_d = obj_max_d;
}
}
$(obj).val( obj_d.getDate().toString().pad(2,'0') + '-' + (obj_d.getMonth()+1).toString().pad(2,'0') + '-' + obj_d.getFullYear() + ' ' + obj_d.getHours().toString().pad(2,'0') + ':' + obj_d.getMinutes().toString().pad(2,'0') );
if( mode != 'standalone' && start.val() && start.val() != start.attr('placeholder') && end.val() && end.val() != end.attr('placeholder') ) {
var start_t = start.val().split(' ');
start_t[0] = start_t[0].split('-');
start_t[1] = start_t[1].split(':');
var end_t = end.val().split(' ');
end_t[0] = end_t[0].split('-');
end_t[1] = end_t[1].split(':');
var start_d = new Date( parseInt( start_t[0][2],10), parseInt(start_t[0][1],10)-1, parseInt(start_t[0][0],10), parseInt(start_t[1][0],10), parseInt(start_t[1][1],10) );
var end_d = new Date( parseInt(end_t[0][2],10), parseInt(end_t[0][1],10)-1, parseInt(end_t[0][0],10), parseInt( end_t[1][0],10) ,parseInt( end_t[1][1],10) );
if( start_d > end_d ){
if( mode == 'start' ){
end_d = start_d;
} else {
start_d = end_d;
}
}
$(start).val( start_d.getDate().toString().pad(2,'0') + '-' + (start_d.getMonth()+1).toString().pad(2,'0') + '-' + start_d.getFullYear() + ' ' + start_d.getHours().toString().pad(2,'0') + ':' + start_d.getMinutes().toString().pad(2,'0') );
$(end).val( end_d.getDate().toString().pad(2,'0') + '-' + (end_d.getMonth()+1).toString().pad(2,'0') + '-' + end_d.getFullYear() + ' ' + end_d.getHours().toString().pad(2,'0') + ':' + end_d.getMinutes().toString().pad(2,'0') );
}
}
}
};
$(obj).datetimepicker(options);
}
Min/max fields to config the front-end date picker
function bind_editor_date_picker( obj ){
var options = {
closeText: 'Sluiten',
prevText: 'Eerder',
nextText: 'Later',
currentText: 'Vandaag',
monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni','juli', 'augustus', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun','jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
weekHeader: 'Wk',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
beforeShow: function() {
var name = $(obj).attr('name');
if( name.indexOf( '_from' ) >= 0 ){
var to = $('input[name="' + name.replace('_from','_to' ) + '"]' );
if( to.val() != '' && to.val() != to.attr('placeholder') ){
$(obj).datepicker("option","maxDate",to.val() );
}
} else {
var from = $('input[name="' + name.replace('_to','_from' ) + '"]' );
if( from.val() != '' && from.val() != from.attr('placeholder') ){
$(obj).datepicker("option","minDate",from.val() );
}
}
}
};
$(obj).datepicker(options);
}
Date picker front-end field(s)
function bind_date_picker( obj ){
var options = {
closeText: 'Sluiten',
prevText: 'Eerder',
nextText: 'Later',
currentText: 'Vandaag',
monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni','juli', 'augustus', 'september', 'oktober', 'november', 'december'],
monthNamesShort: ['jan', 'feb', 'maa', 'apr', 'mei', 'jun','jul', 'aug', 'sep', 'okt', 'nov', 'dec'],
dayNames: ['zondag', 'maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag'],
dayNamesShort: ['zon', 'maa', 'din', 'woe', 'don', 'vri', 'zat'],
dayNamesMin: ['zo', 'ma', 'di', 'wo', 'do', 'vr', 'za'],
weekHeader: 'Wk',
dateFormat: 'dd-mm-yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: '',
beforeShow: function() {
var minval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_from').replace('_end','_from').replace('form_','date_') +'"]' ).val();
var maxval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_to').replace('_end','_to').replace('form_','date_') +'"]' ).val();
if( minval ){
$(obj).datepicker( "option","minDate", minval );
}
if( maxval ){
$(obj).datepicker( "option","maxDate", maxval );
}
var name = $(obj).attr('name');
if( $(obj).hasClass('form_date_start') ){
var end = $('input[name="' + name.replace('_start','_end' ) + '"]' ).val();
if( end ){
$(obj).datepicker( "option","maxDate", end );
}
} else if( $(obj).hasClass( 'form_date_end' ) ) {
var start = $('input[name="' + name.replace('_end','_start' ) + '"]' ).val();
if( start != '' ){
$(obj).datepicker("option","minDate",start );
}
}
},
onClose: function(){
if( $(obj).val() && $(obj).val() != $(obj).attr('placeholder') ) {
var name = $(obj).attr('name');
if( name.indexOf( '_start' ) >= 0 ){
var start = $(obj);
var end= $('input[name="' + name.replace('_start','_end' ) + '"]' );
var mode = 'start';
} else if( name.indexOf( '_end' ) >= 0 ) {
var start = $('input[name="' + name.replace('_end','_start' ) + '"]' );
var end= $(obj);
var mode = 'end';
} else {
var mode = 'standalone';
}
var obj_t = $(obj).val().split('-');
var obj_d = new Date( parseInt( obj_t[2],10), parseInt(obj_t[1],10)-1, parseInt(obj_t[0],10) );
var minval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_from').replace('_end','_from').replace('form_','date_') +'"]' ).val();
var maxval = $(obj).closest( 'li' ).find( 'input[name="' + $(obj).attr('name').replace('_start','_to').replace('_end','_to').replace('form_','date_') +'"]' ).val();
if( minval ){
var obj_min_t = minval.split( '-' );
var obj_min_d = new Date( parseInt( obj_min_t[2],10), parseInt(obj_min_t[1],10)-1, parseInt(obj_min_t[0],10) );
if( obj_min_d > obj_d ){
obj_d = obj_min_d;
}
}
if( maxval ){
var obj_max_t = maxval.split( '-' );
var obj_max_d = new Date( parseInt( obj_max_t[2],10), parseInt(obj_max_t[1],10)-1, parseInt(obj_max_t[0],10) );
if( obj_d > obj_max_d ){
obj_d = obj_max_d;
}
}
$(obj).val( obj_d.getDate().toString().pad(2,'0') + '-' + (obj_d.getMonth()+1).toString().pad(2,'0') + '-' + obj_d.getFullYear() );
if( mode != 'standalone' && start.val() != '' && start.val() != start.attr('placeholder') && end.val() != '' && end.val() != end.attr('placeholder') ) {
var start_t= start.val().split('-');
var end_t = end.val().split('-');
var start_d = new Date( parseInt( start_t[2],10), parseInt(start_t[1],10)-1, parseInt(start_t[0],10) );
var end_d = new Date( parseInt(end_t[2],10), parseInt(end_t[1],10)-1, parseInt(end_t[0],10) );
if( start_d > end_d ){
if( mode == 'start' ){
end_d = start_d;
} else {
start_d = end_d;
}
}
$(start).val( start_d.getDate().toString().pad(2,'0') + '-' + (start_d.getMonth()+1).toString().pad(2,'0') + '-' + start_d.getFullYear() );
$(end).val( end_d.getDate().toString().pad(2,'0') + '-' + (end_d.getMonth()+1).toString().pad(2,'0') + '-' + end_d.getFullYear() );
}
}
}
};
$(obj).datepicker(options);
}
Abhishek Bihani
Aug 14, 2012Hi Trent,
I have set ampm as true while loading the time picker. Suppose i select “9:00 am” as time and click on done. For the second time i open the same time picker it switches to “9:00 pm” instead of “9:00 am”. This is happening for all “am” values if we set ampm to true. Please help me on this to solve.
- abhishek
trent
Aug 14, 2012Abhishek, grab the dev version from Github, it is fixed there.
Abhishek Bihani
Aug 14, 2012Hi Trent,
I have just checked out the dev version as you suggested. But its also has the same bug. Can you please address it into new revision?
Abhishek Bihani
Aug 14, 2012Hi Trent,
I have just checked out the another revision from the dev regarding to that bug only. Its working fine now for me. Thanks for the nice add-on…
Abhishek Bihani
Aug 14, 2012Hi Trent,
I have just checked the last revision. It has solved the ampm bug but has introduced a new one. Once you select the date time and you again click on input to select any other date at that time it gives undefined error and calendar does not show any days.
trent
Aug 14, 2012Ok, I just pushed a fix for this, try updating again from dev.
Mark B
Aug 14, 2012Hi Trent,
I have what should be a trivial problem. I am using a DateTimePicker in a dialog where it is the first control. When I pop up the dialog, the DateTimePicker gets focus and the calendar pops up – an undesirable behavior. I have tried shifting focus to the button next to the DateTimePicker (where it should be) but this doesn’t do anything (I still get the calendar popping up). Is there a way around this – where the calendar pops up only if the user focuses on the control and not just because it is first?
Thank you for a great control and for the help!
Mark B
Samutz
Aug 22, 2012Hi Trent,
I’m having a problem using .datetimepicker() with altField and altFormat from .datepicker().
When used with .datetimepicker() the main field only displays the date and not the the time (or the separator), and the altField’s value does not change.
Here’s a sample of my code.
$('#calDateTimeStart').datetimepicker({ampm: true,
stepMinute: 5,
showOn: "button",
buttonImage: "/forums/images/icons/silk/date.png",
buttonImageOnly: true,
altField: '#calDateTimeStart_hidden',
altFormat: '@',
timeFormat: 'hh:mm tt',
separator: ' @ '
});
...
Luca
Aug 27, 2012I have a problem with your code…I use jQuery timepicker addon version 1.0.1, but it doesn’t work.
When I try use the function .datetimepicker(); firebug said me
TypeError: $tp.find("#ui_tpicker_hour_" + dp_id).slider is not a function
[Interrompi per questo errore]
slide: function(event, ui) {
Where is the error?
I included:
and these file are all in the same folder…
Can you help me please?
Thank you for your support
trent
Aug 28, 2012Sounds like you don’t have jqueryui slider included in your jqueryui build. Be sure to include datepicker and slider in your jqueryui and it should work
Pam
Aug 30, 2012Trent,
Thanks for your work on this add-in. I really appreciate it!
I’ve succesfully added/configured the datetimepicker in a VS2012 MVC4 project executed in debug mode. However, in release mode (when the bundling and minification in is play), I get a runtime error–seems like one of the scripts is not being handled appropriately during minification.
Have you come across this issue yet? If so, any solution?
Thanks again…
David
Aug 30, 2012Trent,
First thanks for your work. It saves me a good amount of time. Here are a couple of issue I want to discuss while making it work with knockout.js. These issues, however, may not be only restricted with knockout.js.
1. I found that datetimepicker(“getDate”) does not always give time portion. I think it’s something to do with splitDateTime as parseDate of jquery.ui datepicker does not always throw an exception as the function expects.
2. I think change event is unnecessarily fired sometimes. I can’t pinpoint an example but I found that the event was fired even when there was no knockout observable variable bind to the control.
trent
Aug 31, 2012Pam, I haven’t had any issues reported with minification (that I have noticed), but the dev branch has had some changes regarding missing commas, you might try the dev copy
David, for #1 I think some updates were made in the dev branch for getDate, but don’t hold me to it on that particular bug. I would grab the dev. For #2 I have not experienced this but is possible. Can you post this issue on Github? We have been knocking out issues left and right there.
Pam
Sep 06, 2012Trent,
The dev version does not resolve the runtime error when the code is minified. Unfortunately, I’m not proficient at debugging minified javascript, so I’m not able to give any specifics. Since I like the add-on so much, I plan on turning off minification to overcome the runtime error. I will keep an eye on the Github site to stay abreast of any future releases to determine if/when I can turn on minification in my app again.
Thanks,
Pam
Tom Reno
Oct 22, 2012Hi Trent,
Thanks for the amazing work. I’m in search of a date/time picker that allows for multiple selections.
I ran across this one that let’s you select multiple dates, but it doesn’t handle time. http://multidatespickr.sourceforge.net
Any chance multiple selections are on the roadmap (if there is even such a thing) for your add-on?
:)
trent
Oct 23, 2012Hey Tom, Currently there are no plans for multiple selections, however if datepicker supports I would be open to integrating it if someone sent over some pull requests to Github. At the moment I don’t have the free time available to. (which is good, that means I have work :) ) I have mostly been doing bug fixes and tweaks.
Andrew
Oct 26, 2012Hi Trent,
Line 159: overrides, i; is causing a problem with MVC 4 Minification.
Thanks.
Pam
Jan 24, 2013Trent,
Do you have any wise words on using this plugin inside of a jquery modal popup? After fussing with it for several hours, I cannot get it to work, but there are no obvious errors that I can see.
Have you had any success with this?
Thanks,
Pam
P.S., it looks like the minification issue is now fixed! Thanks!!
trent
Jan 25, 2013Hey Pam, Many times modals use animation to display, so they may be generated asyncronously. You may want to see if there is an available “onLoad” event (or similar) and attach the timepicker inside that event.
zoice
Feb 28, 2013hi, may i know how to validate the datetimepicker is empty?