Bug Tracker

Opened 9 years ago

Closed 7 years ago

Last modified 5 years ago

#2566 closed enhancement (invalid)

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

Change History (7)

comment:1 Changed 9 years ago by paul

  • Owner changed from paul to iMarc

comment:2 Changed 8 years ago by 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.

comment:3 Changed 8 years ago by 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...

comment:4 Changed 8 years ago by 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.

Image of the new 12 hour functionality

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

comment:5 Changed 8 years ago by 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)

comment:7 Changed 8 years ago by 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;


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

comment:14 Changed 7 years ago by dmethvin

  • Resolution set to invalid
  • Status changed from new to closed

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


Note: See TracTickets for help on using tickets.