Bug Tracker

Modify

Ticket #2566 (closed enhancement: invalid)

Opened 6 years ago

Last modified 2 years ago

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:
Blocking: Blocked by:

Description

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

Attachments

ui.datepicker.css Download (4.2 KB) - added by jdean 6 years ago.
Updated ui.datepicker.css
ui.datepicker.js Download (68.9 KB) - added by jdean 6 years ago.
Updated ui.datepicker.js
ui.datepicker.2.js Download (75.4 KB) - added by mjh_ca 5 years ago.
Updated against svn trunk revision 1560
ui.datepicker.2.css Download (421 bytes) - added by mjh_ca 5 years ago.
Extra, updated, CSS to append to main ui.datepicker.js
ui.datetimepicker.js Download (75.4 KB) - added by stephvahu 5 years ago.
ui.datetimepicker.2.js Download (79.4 KB) - added by stevenmoon 5 years ago.
Added AM/PM functionality
jquery.ui.datetimepicker.png Download (8.2 KB) - added by stevenmoon 5 years ago.
Image of the new 12 hour functionality
ui.datetimepicker.3.js Download (79.4 KB) - added by stevenmoon 5 years ago.
12 Hour bug fixed

Change History

Changed 6 years ago by jdean

Updated ui.datepicker.css

Changed 6 years ago by jdean

Updated ui.datepicker.js

comment:1 Changed 6 years ago by paul

  • Owner changed from paul to iMarc

Changed 5 years ago by mjh_ca

Updated against svn trunk revision 1560

Changed 5 years ago by mjh_ca

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

comment:2 Changed 5 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.

Changed 5 years ago by stephvahu

comment:3 Changed 5 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...

Changed 5 years ago by stevenmoon

Added AM/PM functionality

Changed 5 years ago by stevenmoon

Image of the new 12 hour functionality

comment:4 Changed 5 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)

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

Changed 5 years ago by stevenmoon

12 Hour bug fixed

comment:5 Changed 5 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 5 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;

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

comment:14 Changed 4 years ago by dmethvin

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

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

 http://dev.jqueryui.com

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.