#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: |
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 (8)
Change History (15)
Changed 14 years ago by
Attachment: | ui.datepicker.css added |
---|
comment:1 Changed 14 years ago by
Owner: | changed from paul to iMarc |
---|
Changed 13 years ago by
Attachment: | ui.datepicker.2.js added |
---|
Updated against svn trunk revision 1560
Changed 13 years ago by
Attachment: | ui.datepicker.2.css added |
---|
Extra, updated, CSS to append to main ui.datepicker.js
comment:2 Changed 13 years ago by
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 13 years ago by
Attachment: | ui.datetimepicker.js added |
---|
comment:3 Changed 13 years ago by
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 13 years ago by
Attachment: | jquery.ui.datetimepicker.png added |
---|
Image of the new 12 hour functionality
comment:4 Changed 13 years ago by
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 formats05/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 13 years ago by
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 13 years ago by
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 12 years ago by
Resolution: | → invalid |
---|---|
Status: | new → closed |
This should be filed in the UI bug tracker if still relevant.
Updated ui.datepicker.css