http://blogs.uct.ac.za/blog/lovemores-world/2009/02/25/an-effective-jquery-date-time-picker
did preliminary work on the timepicker component alone.
i modified it and made it run…
* there is an am/pm mode and a 24hour mode.
* lang support for en/de
see here:
download here:
files
code to run it:
>> see timepicker.js for details
<input id="pickerfield" type="text" value="2008-08-12 02:35:00" /> <script src="jquery13/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery_ui_datepicker/jquery_ui_datepicker.js" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ $(function() { $('input').datetime({ userLang : 'en', americanMode: true, }); }); /* ]]> */ </script> <script src="jquery_ui_datepicker/i18n/ui.datepicker-de.js" type="text/javascript"></script> <script src="jquery_ui_datepicker/timepicker_plug/timepicker.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="jquery_ui_datepicker/timepicker_plug/css/style.css"> <link rel="stylesheet" type="text/css" href="jquery_ui_datepicker/smothness/jquery_ui_datepicker.css">
fixes / 090521:
- convert widget time to am/pm if american mode is on
- show correct date from input
- on change at input field modify widget
- if there is no hour/minute given in input, show 00
- start datepicker in given language
- new parameter for language
- able to work on many fields
- write date from datepicker
UPDATE:090430:
* made it work for multiple fields (thx to alex)
* fixed writeDate(), now it writes the same time as the timepicker
Thanks a lot for timepicker.
I have one question: how I can add another one timepicker on the same page for example for element with id=’pickerfield2′ ?
I have StartDate input and EndDate input for ex.
Kommentar von Alex — 30. April 2009 @ 16:34
Thanks a lot for your work but now I’ve found
few bugs:
1)When calendar and timepicker are appears (clicking by input)
I’am trying to select only date and when I click to some date
calendar and timepicker blocks are disapear and data in the input
field still the same. For example:
In the input: 2009-05-29 04:45:00
I click and select 30 of April blocks are disapear and input has data no changed:
2009-05-29 04:45:00
2)I’ve add two inputs with ID’s startDate and endDate, assign pickers for it:
…
$(function() {
$(’#startDate’).datetime();
$(’#endDate’).datetime();
});
…
I’am clicking by #endDate input, pickers are appeared
but when I select some date/time it updates only first input(startDate)
As I understand you have to rename (may be not the best decision.. as variant..)
var htmlins = ”;
in something like this:
var htmlins = ”;
bacasue opens block with pickers for first element
Kommentar von Alex Shapran — 5. Mai 2009 @ 14:18
Hi:
I tried using this date-time picker but it is not running properly in IE. Can you please fix bugs and update the picker? I would have done it myself but I am not technically sound enough for the job. I teach business students and would love to show this to my class if it works.
I will appreciate if you can get this working.
Thanks and Regards,
Rohit
Kommentar von Rohit Aggarwal — 20. Mai 2009 @ 10:57
I like this plugin and am attempting to use it.
The only issue I have is when the page loads and the input field is empty, the datetimepicker comes up, but when you select a date/time nothing populates in the corresponding input field. It seems there has to be a pre-populated date for it to work.
Another nice feature would be to choose date/time formats.
Keep up the good work.
Kommentar von Gary — 1. Juni 2009 @ 18:28
I was able to get the datetimepicker working on empty fields. I replaced sniplet of code beginning on line 229 in timepicker.js file
$(’#datepicker’).datepicker(
’setDate’,
$.datepicker.parseDate(
datepicker_def['dateFormat'],
$(’#pickerplug’).data(’lastdate’)
));
with…
var tmp_date = $(’#pickerplug’).data(’lastdate’);
if(tmp_date.length < 10) {
var now = new Date();
var dy = now.getFullYear(); // Get full year (as opposed to last two digits only)
var dm = ((now.getMonth() + 1) < 10) ? (”0″ + (now.getMonth() + 1)) : now.getMonth + 1 // Get month and correct it (getMonth() returns 0 to 11)
var dd = (now.getDate() < 10) ? (”0″ + now.getDate()) : now.getDate();
var mm = (now.getMinutes() < 10) ? (”0″ + now.getMinutes()) : now.getMinutes();
var hh = (now.getHours() < 10) ? (”0″ + now.getHours()) : now.getHours();
tmp_date = dy + ‘-’ + dm + ‘-’ + dd + ‘ ‘ + hh + “:” + mm + “:00″;
}
$(’#datepicker’).datepicker(
’setDate’,
$.datepicker.parseDate(
datepicker_def['dateFormat'],
tmp_date
));
Hopefully will help someone.
Kommentar von Gary — 3. Juni 2009 @ 22:59
HI Gary,
thanks for your work. I will update the datetime picker asap.
stay tuned
Kommentar von admin — 4. Juni 2009 @ 11:06
Fantastic work - ideal for an events calendar I’m working on at the moment.
Re the IE issue that someone mentioned, its just because it has a comma at the end of the function options, which IE always trips up on. Remove that final comma and it works fine for me on IE7+.
ie. change:
$(’#pickerfield2′).datetime({
userLang : ‘de’,
americanMode: false,
});
to:
$(’#pickerfield2′).datetime({
userLang : ‘de’,
americanMode: false
});
Kommentar von Dave Wrightson — 10. Juni 2009 @ 11:59
thanks for your comment. i will build a new version as soon i have time
Kommentar von admin — 16. Juni 2009 @ 11:22
Hello,
That was a good one. Do you have option to click on Image and open as it is available in jQuery DatePicker?
Kommentar von Achutha Krishnan — 28. Juni 2009 @ 13:48
I got tired of trying to pop it with a calendar image as I didn’t want to rewrite or dig too much so I just used a background image for the text field and put a calendar icon in the back. Works well.
Kommentar von Alex F. — 5. Juli 2009 @ 17:31
Great post!
Kommentar von flash — 6. Juli 2009 @ 18:00
Looks great.
I haven’t found other userful stuff for a date-time picker.
Thanks a lot
Kommentar von Drollinger — 7. Juli 2009 @ 10:57
Hi,
This is great control thank you for all your work!
I had a small problem with $(”#tpSelectedTime .selMins”) using the effect function, so I simple commented out that function-call and now I can use the control without any errors. Just thought I’d let you know there are probably lots of other effect methods that could be used for achieving what you wanted? Below is a copy of the FireFox Error Console message:
Error: $(”#tpSelectedTime .selMins”).effect is not a function
Source: http://blog.w3visions.com/wp-content/selfloaded/jquery_ui_datepicker/timepicker_plug/timepicker.js
Row: 122
Kommentar von David Borgenvik — 16. Juli 2009 @ 11:00
Hi,
this is a great control indeed. It’s really working and it’s always a good job to extend an already successful plugin like ui.datepicker.
A thing that I really needed and it was missing is the dateFormat of the ui.datepicker. This control uses a hardcoded format like yy-mm-dd for dates making it not flexible, while it is very easy to make it use whatever dateFormat you want. I made the changes below and I think it works correctly now but you can test it better for any bugs…
Changes for dateFormat support:
1) Two extra “globar vars” were necessary so now I have something like:
var userLang = arguments[0]['userLang'] || ‘en’;
var b24Hour = !(arguments[0]['americanMode'] || false);
var markerClass = ‘hasDateTime’;
/**
* This is the lang that the plugin was rendered finally if the userLang does not exist.
* This will be changed by renderPickerPlug() if the userLang exists and it’s != ‘en’
*/
var renderedLang = ‘en’;
/**
* The format inserted by the user or a default if not. Default is ‘yy-mm-dd’ date specified by ISO8601.
*/
var dateFormat = arguments[0]['dateFormat'] || ‘yy-mm-dd’; //dafault ISO8601
2) Then into renderPickerPlug() a first line like this was added:
function renderPickerPlug(b24Hour_,lang_) {
renderedLang = (lang[lang_]) ? lang_ : ‘en’;
… //everything else same in here
}
3) And the parseTime() was changed to split correctly the date and time splitting on the lastIndexOf(” “) only and with some options added to correct parse a date formatted with day/month names in the rendered locale:
function parseTime (obj) {
var timevalue = ($(obj).val() || $(this).val());
var time = {}
time[0] = timevalue.substr(0, timevalue.lastIndexOf(” “));
time[1] = timevalue.substr(timevalue.lastIndexOf(” “)+1, timevalue.length);
… //everything else same in here
$(’#datepicker’).datepicker(
’setDate’,
$.datepicker.parseDate(
datepicker_def['dateFormat'],
$(’#pickerplug’).data(’lastdate’),
{
shortYearCutoff: 20,
dayNamesShort: $.datepicker.regional[renderedLang].dayNamesShort,
dayNames: $.datepicker.regional[renderedLang].dayNames,
monthNamesShort: $.datepicker.regional[renderedLang].monthNamesShort,
monthNames: $.datepicker.regional[renderedLang].monthNames
}
));
}
and that was everything with a dateFormat option to the constructor you can use every format you want…
I am thinking about some other changes too, like seconds support and an option to disable the input that renders the plugin.
PS: a greek translation like this was added also and I post it here if you want to include it:
lang['el'] = {
time: ‘Ώρα’,
hour: ‘Ώρα’,
minute: ‘Λεπτά’,
close: ‘Κλείσιμο’
};
Thanks again for this wonderful plugin,
Aggelos Karalias
Kommentar von Aggelos Karalias — 4. August 2009 @ 19:26
An important note that I forgot in the previous post.
The $.datepicker.regional[renderedLang] of course needs the i18n js file of the datepicker included (in my app I edit the plugin to include it dynamically by the userLang specified by the user but this is not what everyone wants).
The problem is with the ‘en’ lang. When you specify english as the lang obviously you don’t need to include a lang file, but $.datepicker.regional['en'] does not work because you must refer to the default region like this $.datepicker.regional['']. This is not so flexible and it needs one line to change with $.datepicker.regional['en']=$.datepicker.regional['']
You can just add $.datepicker.regional['en']=$.datepicker.regional[''] as a first line to this plugin if datepicker developers are not willing to include this.
Sorry for the long posts,
Aggelos Karalias
Kommentar von Aggelos Karalias — 4. August 2009 @ 19:43
Thanks for post. Nice to see such good ideas.
Kommentar von Sdanektir — 6. August 2009 @ 21:24
thank you!good jobs!
$(’#tpSelectedTime .selHrs’).effect(’highlight’, 1000);
but in ie7,report error: Microsoft JScript runtime error: Object does not support this property or method. remove this line will work fine in IE7.
Kommentar von ythjk — 16. August 2009 @ 18:06
// Slider
$(’#minuteSlider’).slider({
orientation: “vertical”,
range: ‘min’,
min: 0,
max: 55,
max: 55
minute can not chose the valut biger then 55.it must shold be 59 or 60.
Kommentar von ythjk — 16. August 2009 @ 18:10