24 hour Time Picker Added to UI Datepicker v3.4

[jdean]

For an internal project we needed a calendar with time picker as well so we have updated UI Datepicker with a 24 hour time picker.

The updated js and css files are attached if anyone wants to use them or incorporate back into a future version of UI Datepicker.

The new date format codes are

HH - Hours
II - Minutes
SS - seconds.
eg: dateFormat: 'yy-mm-dd HH:II:SS',

New parameters

showTime: true,
timePos: 'top' or 'bottom',

New class

datepicker_time

Regards
James Dean
​One Reason Pty Ltd

[mjh_ca]

Hi James, nice job with getting time selection working.

I have updated it to work against the latest revision to the file in the svn trunk (r1560) and updated the css (note, you need the base CSS from the svn trunk as well as the attached ui.datepicker.2.css for proper display). The updated files are attached below.

The date format codes remain the same.

A couple of changes/updates:

The time selector is now shown if there are ANY time format codes in dateFormat (use James' example above for dateFormat), so there is no longer a showTime option as it is not necessary. You can also use HH:II without the SS and the datepicker will provide hour and minute selection without seconds.

jQuery devs - is this something you would consider for inclusion? I'm happy to work with you to make changes as necessary to get it included.

[stephvahu]

Hi, I needed this updated to version 1.7.1. So here it is. The CSS hasn't been modified. So all you need is :

ui.datetimepicker.js (download from here)

ui.datepicker.css (the 'official' one)

ui.datepicker.2.css (download from here)

Here is an example:

$("#when").datepicker({dateFormat:'dd/mm/yy, HH:II:SS'});

In some cases, you may need to change the z-index of the date picker div:

$("#ui-datepicker-div").css("z-index", 1000);

(not a very clean way to do, but it works...)

It would be really great if these modifications could be included in the main trunk...

[stevenmoon]

I have updated the javascript to enable AM/PM functionality. I have tested it to be fully backwards compatible with the previous version of ui.datetimepicker.js. The new file is named ui.datetimepicker.2.js, but you should be able to replace the ui.datetimepicker.js file in your project with the new file.

You will need

ui.datetimepicker.2.js (download from here)
ui.datepicker.css (the 'official' one)
ui.datepicker.2.css (download from here)

New dateFormat codes:

h - indicates hour in 12 hour format (can be h or hh)
t - am/pm (must occur as tt)
T - AM/PM (must occur as TT)

Examples:

dateFormat: 'mm/dd/yy h:II:SS TT'

05/01/09 9:15:07 AM

dateFormat: 'mm/dd/yy h:II:SS tt'

05/01/09 9:15:07 am

dateFormat: 'mm/dd/yy hh:II:SS TT'

05/01/09 09:15:07 AM

dateFormat: 'mm/dd/yy h:II:SS (tt)'

05/01/09 9:15:07 (am)

You can even do something like dateFormat: 'mm/dd/yy h(H):II:SStt' to display both 12 and 24 hour formats

05/01/09 9(21):15:07pm

Please note
You may want to add a <br/> after the text for timeText property to prevent the am/pm select from dropping to a new line due to the limited width of the calendar container. The datetimepicker in the image has the timeText property set as follows:

timeText: 'Time<br/>'

Please test everything on your own in your project to ensure production ready functionality.

As far as this ever being integrated into the trunk as a real jquery ui element - I have my doubts. There has to be a better way to select time. One example can be found ​here. I hope to implement something like that myself based on his work, but I do not have time right now. The drop down method in this ticket will have to do for now.

Please enjoy! If you have any questions please email me at steven.moon at monsoondev.com

[stevenmoon]

I fixed a small bug that prevented typing in [aApPmM] when using the "TT" code. It still worked fine when using lower the case "tt".

The new file:

ui.datepicker.3.css (download from here)

[dmyers2004]

First post please forgive me for my "newbie-ness" in this post

I added a minute adder to ui.datetimepicker.3.js. Right now it's aways 1,2,3,4,5,6,7,8... but I wanted the ability to make it 0,5,10,15,20... or 0,10,20,30,40,50 etc...

added after line 1647 which is

var drawAmPm = inst.drawAmPm;

add

var minuteadder = (this._get(inst,'minute_adder') > 0 
? this._get(inst,'minute_adder') : 1);

then change line 1674 (after adding above line) from

for (; minute <= endMinute; minute++) {

to

for (; minute <= endMinute; minute = minute + minuteadder) {

you can then use the option:

minute_adder: 1 
minute_adder: 5
minute_adder: 10

default it 1 (what it is now)

Hope somebody else can use this all comments welcome

[dmethvin]

This should be filed in the UI bug tracker if still relevant.

​http://dev.jqueryui.com