Trent Richardson
So I didn’t get bogged down with a ton of changes I’ve decided to release another new version. Thanks to Reinout and other contributors the timepicker addon is now a little more friendly, allowing you to type time within a constrained field as well as live updating the input box as you slide the time pickers. There have been a couple other changes posted on the blog, and I will get to those. Thanks to everyone for your feedback!
Related posts:
15 Responses
Ulf Lindback
11|May|2010Nice work.
I would really like to see an altTimeFormat as well, if I set an altField and altFormat for the datePicker, no time is output in the altField.
Ulf Lindback
11|May|2010Another thing, changing the date triggers a change even on the edit box, but not changing the time.
trent
11|May|2010I will add these to the list.. there is still much that needs to be done so it is a work in progress. Thanks for your feedback!
Jeremy
14|May|2010Proposed addition #1: Add the ability to hide the time from being displayed in the popup.
1) Insert under line 41 “showTime: true,”
2) Update lines 121 and 122
From: (hopefully the html displays correctly in this post)
‘<dt id=”ui_tpicker_time_label”>Time</dt>’ +
‘<dd id=”ui_tpicker_time”></dd>’ +
To:
‘<dt id=”ui_tpicker_time_label”‘ + ((tp_inst.defaults.showTime) ? ” : ‘ style=”display:none;”‘) + ‘>Time</dt>’ +
‘<dd id=”ui_tpicker_time”‘ + ((tp_inst.defaults.showTime) ? ” : ‘ style=”display:none;”‘) + ‘></dd>’ +
Jeremy
14|May|2010Haven’t looked into how to do this yet, but it would be nice to enhance the datetimepicker so that it doesn’t update the time portion unless you actually set to the time in the popup.
I have it set to close the date picker when a day is clicked, and I don’t want it to update the time portion unless the time has actually been changed.
Jeremy
17|May|2010Another proposed update: I think you can reduce the required code when overrideing the $.datepicker._updateDatepicker function.
Try replacing it with this:
$.datepicker._base_updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
// Call original datepicker method
this._base_updateDatepicker(inst);
// Reload the time control when changing something in the input text field.
this._beforeShow(inst.input, inst);
};
Jeremy
17|May|2010Another proposed update: (Hope you don’t mind). This one is so you can prevent the datetimepicker from setting the time portion to 0000 if there is currently no time defined.
It took 6 code changes to get this to work. I itemized them below. If it’s difficult to follow and you are interested, email me I can send you the js file with my changes.
1) Insert a new default to the Timepicker.Prototype after line 49 “timeFormat: ‘hh:mm tt’”:
alwaysSetTime: true //true keeps existing behavior
2) Insert line in addTimePicker around line 87 (before the setTimeout call):
//Determine if there is a time value already defined
tp_inst.timeDefined = (treg) ? true : false;
3) Update injectTimePicker function (insde the “if (dp_inst != null)” code block):
3a) Before call to tp_inst.onTimeChange:
//Initialize a flag to indicate if the time has been defined
//required because the onTimeChange is always going to set timeDefined
//to true, as it’s normally called by the sliders
var timeDefined = tp_inst.timeDefined;
3b) After call to tp_inst.onTimeChange:
tp_inst.timeDefined = timeDefined;
4) update onTimeChange function (if hasChanged() code block):
//Set a flag to indicate the user defined the time
//Update the time in the textbox if it was changed
if (hasChanged) {
tp_inst.updateDateTime(dp_inst, tp_inst);
tp_inst.timeDefined = true;
}
5) Update updateDateTime function where it sets this.formattedDateTime:
//Only update the time if the user set its value or if there was a value already there
//this.formattedDateTime = this.formattedDate +’ ‘+ this.formattedTime;
if (this.defaults.alwaysSetTime) {
this.formattedDateTime = this.formattedDate + ‘ ‘ + this.formattedTime;
}
else {
if (dt == null || !tp_inst.timeDefined || tp_inst.timeDefined == false) {
this.formattedDateTime = this.formattedDate
}
else {
this.formattedDateTime = this.formattedDate + ‘ ‘ + this.formattedTime;
}
}
6) Update the onChangeMonthYear function (line 262):
I had to remove the call to tp.addTimePicker(inst) as it kept reseting my timeDefined variable to true. I couldn’t find any adverse affects of removing this line.
Jeremy
17|May|2010Last proposed update for today. This fixes a scenario where the time part can not be determined if there is no : in the time format:
Added code to addTimePicker function, line 65, just before “var order = this.getFormatPositions();”
//If not a time only picker, then specify that the time portion is always the second part of the string, after a space
if (!this.defaults.timeOnly) {
//the time should come after x number of characters and a space. x = at least the length of text specified by the date format
regstr = ‘\\S{‘ + this.defaults.dateFormat.length + ‘,}\\s+’ + regstr
}
Paul
17|May|2010Great work Trent, love the plugin! Just one bug I have found which can be seen on your demo page. If you set the stepMinutes (eg. 10), the far left position will be displayed as 08:10 then the next step will be 08:00 then 08:10.
It should be 08:00, 08:10, 08:20 etc.
trent
18|May|2010I noticed that too, I’m not sure if it goes back to jQuery UI’s slider control or something I’ve done wrong. It only occurs when using the steps.. so it may be on my end.
Paul
18|May|2010Tested it with the jQuery UI’s slider control and it behaves correctly so must be something in the plugin somewhere. If I find some time today I’ll have a look into it and see if I can find anything.
Also I think the max shouldn’t be 59 but rather (60 – steps). So if stepMinute is 5, the max step you can select is 55.
Chris
19|May|2010I noticed another bug as well. It seems after switching months and clicking done the “close” event is not captured correctly. I am using the onClose parameter and it does not work properly after switching months.
trent
20|May|2010Hey Paul,
Thanks for checking in to it. I’ve not had a chance as of yet to research it. As for the 59 instead of 60.. there is no 2:60am .. that would be 3:00am. Technically there are 60 minutes in an hour, but the 60th minute shows as 00 on the next hour.
Chris,
I will look more closely, it appears there are a few datepicker options which aren’t passing through correctly.
Michael
23|May|2010Great work Trent, just what I needed :)
A minor fix: If you don’t slide but jump, the “slide” event is not triggered. So I added…
, change: function () { tp_inst.onTimeChange(dp_inst, tp_inst); }
…in lines 139-141.
Michael
trent
28|May|2010Hey Michael, thanks, I know this was one of the out standing issues! I appreciate you posting your changes