Skip to main content

Bug Tracker

Side navigation

#2566 closed enhancement (invalid)

Opened March 20, 2008 05:29AM UTC

Closed July 11, 2010 06:41PM UTC

Last modified March 15, 2012 09:20AM UTC

24 hour Time Picker Added to UI Datepicker v3.4

Reported by: jdean Owned by: iMarc
Priority: major Milestone:
Component: ui Version:
Keywords: calendar date time picker Cc:
Blocked by: Blocking:

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



James Dean

One Reason Pty Ltd

Attachments (8)
  • jquery.ui.datetimepicker.png (8.2 KB) - added by stevenmoon May 01, 2009 05:40PM UTC.

    Image of the new 12 hour functionality

  • ui.datepicker.2.css (0.4 KB) - added by mjh_ca January 14, 2009 11:09AM UTC.

    Extra, updated, CSS to append to main ui.datepicker.js

  • ui.datepicker.2.js (75.4 KB) - added by mjh_ca January 14, 2009 11:08AM UTC.

    Updated against svn trunk revision 1560

  • ui.datepicker.css (4.2 KB) - added by jdean March 20, 2008 05:30AM UTC.

    Updated ui.datepicker.css

  • ui.datepicker.js (68.9 KB) - added by jdean March 20, 2008 05:31AM UTC.

    Updated ui.datepicker.js

  • ui.datetimepicker.2.js (79.4 KB) - added by stevenmoon May 01, 2009 05:03PM UTC.

    Added AM/PM functionality

  • ui.datetimepicker.3.js (79.4 KB) - added by stevenmoon May 01, 2009 07:38PM UTC.

    12 Hour bug fixed

  • ui.datetimepicker.js (75.4 KB) - added by stephvahu April 05, 2009 10:08AM UTC.
Change History (7)

Changed March 25, 2008 02:50PM UTC by paul comment:1

owner: pauliMarc

Changed January 14, 2009 11:19AM UTC by mjh_ca comment:2

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.

Changed April 05, 2009 10:24AM UTC by stephvahu comment:3

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...

Changed May 01, 2009 06:02PM UTC by stevenmoon comment:4

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.

[[Image(jquery.ui.datetimepicker.png, nolink)]]

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)


>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

Changed May 01, 2009 07:40PM UTC by stevenmoon comment:5

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)

Changed July 16, 2009 09:06PM UTC by dmyers2004 comment:6

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;


  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++) {


  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

Changed July 11, 2010 06:41PM UTC by dmethvin comment:7

resolution: → invalid
status: newclosed

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